keyboard navigation of text inputs fixed

src/common/Input/Input.js

@@ -2,8 +2,10 @@ const React = require('react');
 const PropTypes = require('prop-types');
 const classnames = require('classnames');
 const useTabIndex = require('../useTabIndex');
+const styles = require('./styles');
 
 const ENTER_KEY_CODE = 13;
+const ARROW_KEY_CODE = { 37: 'left', 38: 'up', 39: 'right', 40: 'down' };
 
 const Input = React.forwardRef((props, ref) => {
     const tabIndex = useTabIndex(props.tabIndex, props.disabled);
@@ -16,13 +18,23 @@ const Input = React.forwardRef((props, ref) => {
             props.onSubmit(event);
         }
     }, [props.onKeyUp, props.onSubmit]);
+    const onKeyDown = React.useCallback((event) => {
+        if (ARROW_KEY_CODE[event.keyCode]) {
+            event.stopPropagation();
+            if (event.shiftKey) {
+                event.preventDefault();
+                window.navigate(ARROW_KEY_CODE[event.keyCode]);
+            }
+        }
+    }, [props.onKeyDown]);
     return (
         <input
             {...props}
             ref={ref}
-            className={classnames(props.className, { 'disabled': props.disabled })}
+            className={classnames(props.className, styles['input-container'], { 'disabled': props.disabled })}
             tabIndex={tabIndex}
             onKeyUp={onKeyUp}
+            onKeyDown={onKeyDown}
         />
     );
 });
@@ -34,6 +46,7 @@ Input.propTypes = {
     tabIndex: PropTypes.number,
     disabled: PropTypes.bool,
     onKeyUp: PropTypes.func,
+    onKeyDown: PropTypes.func,
     onSubmit: PropTypes.func
 };
 

src/common/Input/styles.less

@@ -0,0 +1,8 @@
+.input-container {
+    --spatial-navigation-action: focus;
+    user-select: text;
+
+    &::-moz-focus-inner {
+        border: none;
+    }
+}