handling dpad navigation in input dropped

This commit is contained in:
NikolaBorislavovHristov 2019-08-05 22:39:48 +03:00
parent a4c474a33b
commit 575b469735
2 changed files with 0 additions and 13 deletions

View file

@ -5,7 +5,6 @@ const useTabIndex = require('../useTabIndex');
const styles = require('./styles'); const styles = require('./styles');
const ENTER_KEY_CODE = 13; const ENTER_KEY_CODE = 13;
const ARROW_KEY_CODE = { 37: 'left', 38: 'up', 39: 'right', 40: 'down' };
const Input = React.forwardRef((props, ref) => { const Input = React.forwardRef((props, ref) => {
const tabIndex = useTabIndex(props.tabIndex, props.disabled); const tabIndex = useTabIndex(props.tabIndex, props.disabled);
@ -18,15 +17,6 @@ const Input = React.forwardRef((props, ref) => {
props.onSubmit(event); props.onSubmit(event);
} }
}, [props.onKeyUp, props.onSubmit]); }, [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 ( return (
<input <input
{...props} {...props}
@ -34,7 +24,6 @@ const Input = React.forwardRef((props, ref) => {
className={classnames(props.className, styles['input-container'], { 'disabled': props.disabled })} className={classnames(props.className, styles['input-container'], { 'disabled': props.disabled })}
tabIndex={tabIndex} tabIndex={tabIndex}
onKeyUp={onKeyUp} onKeyUp={onKeyUp}
onKeyDown={onKeyDown}
/> />
); );
}); });
@ -46,7 +35,6 @@ Input.propTypes = {
tabIndex: PropTypes.number, tabIndex: PropTypes.number,
disabled: PropTypes.bool, disabled: PropTypes.bool,
onKeyUp: PropTypes.func, onKeyUp: PropTypes.func,
onKeyDown: PropTypes.func,
onSubmit: PropTypes.func onSubmit: PropTypes.func
}; };

View file

@ -1,5 +1,4 @@
.input-container { .input-container {
--spatial-navigation-action: focus;
user-select: text; user-select: text;
&::-moz-focus-inner { &::-moz-focus-inner {