SearchBox: don't space-activate search results on key-navigation

Space keys should rather be sent to the text input field

Author: manisandro

components/SearchBox.jsx

@@ -257,7 +257,7 @@ class SearchBox extends React.Component {
             }
         }
         return (
-            <PopupMenu anchor={this.searchBox} className="searchbox-results" onClose={() => this.setState({resultsVisible: false})} setMaxWidth>
+            <PopupMenu anchor={this.searchBox} className="searchbox-results" onClose={() => this.setState({resultsVisible: false})} setMaxWidth spaceKeyActivation={false}>
                 {children}
             </PopupMenu>
         );

components/widgets/PopupMenu.jsx

@@ -25,10 +25,14 @@ export default class PopupMenu extends React.PureComponent {
         disabledItemClass: PropTypes.string,
         onClose: PropTypes.func,
         setMaxWidth: PropTypes.bool,
+        spaceKeyActivation: PropTypes.bool,
         width: PropTypes.number,
         x: PropTypes.number,
         y: PropTypes.number
     };
+    static defaultProps = {
+        spaceKeyActivation: true
+    };
     constructor(props) {
         super(props);
         this.container = document.createElement("div");
@@ -123,7 +127,7 @@ export default class PopupMenu extends React.PureComponent {
                     return React.cloneElement(child, {
                         className: className,
                         tabIndex: child.props.disabled ? undefined : 0,
-                        onKeyDown: child.props.disabled ? undefined : MiscUtils.checkKeyActivate,
+                        onKeyDown: child.props.disabled ? undefined : ev => MiscUtils.checkKeyActivate(ev, null, this.props.spaceKeyActivation),
                         onMouseOver: child.props.disabled ? undefined : ev => ev.target.focus()
                     });
                 })}
@@ -163,7 +167,7 @@ export default class PopupMenu extends React.PureComponent {
             this.props.onClose?.();
             this.props.anchor?.focus?.();
             MiscUtils.killEvent(ev);
-        } else if (ev.key === 'Enter' || ev.key === ' ') {
+        } else if (ev.key === 'Enter' || (ev.key === ' ' && this.props.spaceKeyActivation)) {
             MiscUtils.killEvent(ev);
         } else if (ev.key !== 'Tab' && ev.key !== 'Shift') {
             this.props.anchor?.focus?.();

utils/MiscUtils.js

@@ -76,8 +76,8 @@ const MiscUtils = {
             ev.preventDefault();
         }
     },
-    checkKeyActivate(ev, onEsc = null) {
-        if (ev.code === "Space" || ev.code === "Enter") {
+    checkKeyActivate(ev, onEsc = null, spaceActivate = true) {
+        if ((spaceActivate && ev.code === "Space") || ev.code === "Enter") {
             MiscUtils.killEvent(ev);
             ev.currentTarget.click();
         } else if (ev.code === "Escape" && onEsc) {