From 7f090f8de186e87be1016533a1ff4b4e4ca91a21 Mon Sep 17 00:00:00 2001
From: Olivier Tassinari <olivier.tassinari@gmail.com>
Date: Mon, 19 Mar 2018 22:08:24 +0100
Subject: [PATCH] [docs] Add search shortcut

---
 docs/src/modules/components/AppSearch.js | 55 +++++++++++++++++-------
 1 file changed, 40 insertions(+), 15 deletions(-)

diff --git a/docs/src/modules/components/AppSearch.js b/docs/src/modules/components/AppSearch.js
index f9f14a6fd9a844..15f2e2a2db7737 100644
--- a/docs/src/modules/components/AppSearch.js
+++ b/docs/src/modules/components/AppSearch.js
@@ -1,6 +1,8 @@
 import React from 'react';
+import keycode from 'keycode';
 import compose from 'recompose/compose';
 import pure from 'recompose/pure';
+import EventListener from 'react-event-listener';
 import PropTypes from 'prop-types';
 import withWidth, { isWidthUp } from 'material-ui/utils/withWidth';
 import SearchIcon from 'material-ui-icons/Search';
@@ -114,24 +116,47 @@ const styles = theme => ({
   },
 });
 
-function AppSearch(props) {
-  const { classes, width } = props;
+class AppSearch extends React.Component {
+  handleKeyDown = event => {
+    if (
+      ['/', 's'].indexOf(keycode(event)) !== -1 &&
+      document.activeElement.nodeName.toLowerCase() === 'body' &&
+      document.activeElement !== this.input
+    ) {
+      event.preventDefault();
+      this.input.focus();
+    }
+  };
 
-  if (!isWidthUp('sm', width)) {
-    removeDocsearch();
-    return null;
-  }
+  input = null;
+
+  render() {
+    const { classes, width } = this.props;
 
-  initDocsearch();
+    if (!isWidthUp('sm', width)) {
+      removeDocsearch();
+      return null;
+    }
+
+    initDocsearch();
 
-  return (
-    <div className={classes.root}>
-      <div className={classes.search}>
-        <SearchIcon />
-      </div>
-      <input id="docsearch-input" className={classes.input} />
-    </div>
-  );
+    return (
+      <EventListener target="window" onKeyDown={this.handleKeyDown}>
+        <div className={classes.root}>
+          <div className={classes.search}>
+            <SearchIcon />
+          </div>
+          <input
+            id="docsearch-input"
+            ref={node => {
+              this.input = node;
+            }}
+            className={classes.input}
+          />
+        </div>
+      </EventListener>
+    );
+  }
 }
 
 AppSearch.propTypes = {