Skip to content

Commit

Permalink
Adjust to handle fast input where next number maybe pressed before cu…
Browse files Browse the repository at this point in the history
…rrent is released
  • Loading branch information
adamwoodnz committed May 19, 2023
1 parent 6d6ad1d commit 562db78
Showing 1 changed file with 9 additions and 4 deletions.
13 changes: 9 additions & 4 deletions settings/src/components/auto-tabbing-input.js
Original file line number Diff line number Diff line change
Expand Up @@ -21,16 +21,20 @@ const AutoTabbingInput = ( props ) => {
} );
}, [] );

const handleKeyUp = useCallback( ( value, event, index, inputElement ) => {
const handleKeyDown = useCallback( ( value, event, index, inputElement ) => {
// Ignore keys associated with input navigation and paste events.
if ( [ 'Tab', 'Shift', 'Meta' ].includes( event.key ) ) {
if ( [ 'Tab', 'Shift', 'Meta', 'Backspace' ].includes( event.key ) ) {
return;
}

if ( !! value && inputElement.nextElementSibling ) {
inputElement.nextElementSibling.focus();
}
}, [] );

const handleKeyUp = useCallback( ( value, event, index, inputElement ) => {
if ( event.key === 'Backspace' && inputElement.previousElementSibling ) {
inputElement.previousElementSibling.focus();
} else if ( !! value && inputElement.nextElementSibling ) {
inputElement.nextElementSibling.focus();
}
}, [] );

Expand Down Expand Up @@ -66,6 +70,7 @@ const AutoTabbingInput = ( props ) => {
key={ index }
index={ index }
onChange={ handleChange }
onKeyDown={ handleKeyDown }
onKeyUp={ handleKeyUp }
onFocus={ handleFocus }
maxLength="1"
Expand Down

0 comments on commit 562db78

Please sign in to comment.