Focus on search input with ctrl + s

OpenConceptLab · Jan 6, 2023 · 64c4fd5 · 64c4fd5
1 parent b8af10c
commit 64c4fd5
Showing 1 changed file with 17 additions and 0 deletions.
diff --git a/src/components/search/SearchInput.jsx b/src/components/search/SearchInput.jsx
@@ -13,6 +13,8 @@ class SearchInput extends React.Component {
   constructor(props){
     super(props);
 
+    this.inputRef = React.createRef();
+
     this.state = {
       siteTitle: getSiteTitle(),
       input: undefined,
@@ -28,7 +30,21 @@ class SearchInput extends React.Component {
     return queryParams.get(attr, defaultValue || '')
   }
 
+  _listenKey = event => {
+    const isCtrlS = event.keyCode === 83 && event.ctrlKey;
+    if (!isCtrlS) {
+      return;
+    }
+
+    this.inputRef.current.focus();
+  };
+
+  componentWillUnmount() {
+    document.body.removeEventListener("keydown", this._listenKey);
+  }
+
   componentDidMount() {
+    document.body.addEventListener("keydown", this._listenKey);
     this.setState({
       input: this.getValueFromURL('q'), exactMatch: this.getValueFromURL('exactMatch')
     })
@@ -121,6 +137,7 @@ class SearchInput extends React.Component {
           fullWidth
           onChange={this.handleInputChange}
           onKeyPress={this.handleKeyPress}
+          inputRef={this.inputRef}
         />
         {
           input &&