cmd-k shortcut to the searchbox

element-hq · Apr 15, 2017 · a74bbb4 · a74bbb4
1 parent 15accf3
commit a74bbb4
Showing 1 changed file with 30 additions and 0 deletions.
diff --git a/src/components/structures/SearchBox.js b/src/components/structures/SearchBox.js
@@ -21,6 +21,7 @@ var sdk = require('matrix-react-sdk')
 var dis = require('matrix-react-sdk/lib/dispatcher');
 var rate_limited_func = require('matrix-react-sdk/lib/ratelimitedfunc');
 var AccessibleButton = require('matrix-react-sdk/lib/components/views/elements/AccessibleButton');
+var KeyCode = require('matrix-react-sdk/lib/KeyCode');
 
 module.exports = React.createClass({
     displayName: 'SearchBox',
@@ -38,10 +39,12 @@ module.exports = React.createClass({
 
     componentDidMount: function() {
         this.dispatcherRef = dis.register(this.onAction);
+        document.addEventListener('keydown', this._onKeyDown);
     },
 
     componentWillUnmount: function() {
         dis.unregister(this.dispatcherRef);
+        document.removeEventListener('keydown', this._onKeyDown);
     },
 
     onAction: function(payload) {
@@ -90,6 +93,33 @@ module.exports = React.createClass({
         this.onChange();
     },
 
+    _onKeyDown: function(ev) {
+        let handled = false;
+        const isMac = navigator.platform.toUpperCase().indexOf('MAC') >= 0;
+        let ctrlCmdOnly;
+        if (isMac) {
+            ctrlCmdOnly = ev.metaKey && !ev.altKey && !ev.ctrlKey && !ev.shiftKey;
+        } else {
+            ctrlCmdOnly = ev.ctrlKey && !ev.altKey && !ev.metaKey && !ev.shiftKey;
+        }
+
+        switch (ev.keyCode) {
+            case KeyCode.KEY_K:
+                if (ctrlCmdOnly) {
+                    if (this.refs.search) {
+                        this.refs.search.focus();
+                    }
+                    handled = true;
+                }
+                break;
+        }
+
+        if (handled) {
+            ev.stopPropagation();
+            ev.preventDefault();
+        }
+    },
+
     render: function() {
         var TintableSvg = sdk.getComponent('elements.TintableSvg');