diff --git a/src/common/Input/Input.js b/src/common/Input/Input.js index 9d467285c..8d5e8ed12 100644 --- a/src/common/Input/Input.js +++ b/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 ( ); }); @@ -34,6 +46,7 @@ Input.propTypes = { tabIndex: PropTypes.number, disabled: PropTypes.bool, onKeyUp: PropTypes.func, + onKeyDown: PropTypes.func, onSubmit: PropTypes.func }; diff --git a/src/common/Input/styles.less b/src/common/Input/styles.less new file mode 100644 index 000000000..4c5034d54 --- /dev/null +++ b/src/common/Input/styles.less @@ -0,0 +1,8 @@ +.input-container { + --spatial-navigation-action: focus; + user-select: text; + + &::-moz-focus-inner { + border: none; + } +} \ No newline at end of file