From 562db7895a4e4a9a1dbdef25dba3f46a715b1ff3 Mon Sep 17 00:00:00 2001
From: Adam Wood <adam.wood@automattic.com>
Date: Fri, 19 May 2023 15:23:59 +1200
Subject: [PATCH] Adjust to handle fast input where next number maybe pressed
 before current is released

---
 settings/src/components/auto-tabbing-input.js | 13 +++++++++----
 1 file changed, 9 insertions(+), 4 deletions(-)

diff --git a/settings/src/components/auto-tabbing-input.js b/settings/src/components/auto-tabbing-input.js
index 9478a3fe..e89c4115 100644
--- a/settings/src/components/auto-tabbing-input.js
+++ b/settings/src/components/auto-tabbing-input.js
@@ -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();
 		}
 	}, [] );
 
@@ -66,6 +70,7 @@ const AutoTabbingInput = ( props ) => {
 					key={ index }
 					index={ index }
 					onChange={ handleChange }
+					onKeyDown={ handleKeyDown }
 					onKeyUp={ handleKeyUp }
 					onFocus={ handleFocus }
 					maxLength="1"