From a1ec31894e7f9526208c90db3cf0aa755fc72705 Mon Sep 17 00:00:00 2001
From: Dion Hulse <dion@wordpress.org>
Date: Mon, 8 May 2023 06:58:33 +0000
Subject: [PATCH 1/8] Add a Paste handler for the TOTP interface.

---
 settings/src/components/auto-tabbing-input.js | 12 +++++++++++-
 1 file changed, 11 insertions(+), 1 deletion(-)

diff --git a/settings/src/components/auto-tabbing-input.js b/settings/src/components/auto-tabbing-input.js
index 1e00e12e..3ab524b5 100644
--- a/settings/src/components/auto-tabbing-input.js
+++ b/settings/src/components/auto-tabbing-input.js
@@ -45,8 +45,18 @@ const AutoTabbingInput = ( props ) => {
 		}
 	}, [] );
 
+	const handlePaste = useCallback( ( event ) => {
+		const paste = event.clipboardData.getData('Text').replace( /[^0-9]/g, '' )
+
+		if ( inputs.length == paste.length ) {
+			event.preventDefault();
+			setInputs( paste.split('') );
+			onComplete( true );
+		}
+	}, [] );
+
 	return (
-		<div className={ 'wporg-2fa__auto-tabbing-input' + ( error ? ' is-error' : '' ) }>
+		<div className={ 'wporg-2fa__auto-tabbing-input' + ( error ? ' is-error' : '' ) } onPaste={ handlePaste }>
 			{ inputs.map( ( value, index ) => (
 				<NumericControl
 					{ ...props }

From ea291ad9958076941822c4ce6afda2c78dbd2520 Mon Sep 17 00:00:00 2001
From: Dion Hulse <dion@wordpress.org>
Date: Mon, 8 May 2023 07:09:03 +0000
Subject: [PATCH 2/8] Make Prettier happy.

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

diff --git a/settings/src/components/auto-tabbing-input.js b/settings/src/components/auto-tabbing-input.js
index 3ab524b5..2727bb92 100644
--- a/settings/src/components/auto-tabbing-input.js
+++ b/settings/src/components/auto-tabbing-input.js
@@ -46,17 +46,20 @@ const AutoTabbingInput = ( props ) => {
 	}, [] );
 
 	const handlePaste = useCallback( ( event ) => {
-		const paste = event.clipboardData.getData('Text').replace( /[^0-9]/g, '' )
+		const paste = event.clipboardData.getData( 'Text' ).replace( /[^0-9]/g, '' );
 
-		if ( inputs.length == paste.length ) {
+		if ( inputs.length === paste.length ) {
 			event.preventDefault();
-			setInputs( paste.split('') );
+			setInputs( paste.split( '' ) );
 			onComplete( true );
 		}
 	}, [] );
 
 	return (
-		<div className={ 'wporg-2fa__auto-tabbing-input' + ( error ? ' is-error' : '' ) } onPaste={ handlePaste }>
+		<div
+			className={ 'wporg-2fa__auto-tabbing-input' + ( error ? ' is-error' : '' ) }
+			onPaste={ handlePaste }
+		>
 			{ inputs.map( ( value, index ) => (
 				<NumericControl
 					{ ...props }

From 17e162ef2ba6a6fb4bfdf71b458f0ddac7b985a7 Mon Sep 17 00:00:00 2001
From: Dion Hulse <dion@wordpress.org>
Date: Mon, 8 May 2023 07:14:18 +0000
Subject: [PATCH 3/8] Disable the Enable button when Clear is used.

---
 settings/src/components/totp.js | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/settings/src/components/totp.js b/settings/src/components/totp.js
index 3c158ad7..3d9eac13 100644
--- a/settings/src/components/totp.js
+++ b/settings/src/components/totp.js
@@ -231,7 +231,10 @@ function SetupForm( { handleEnable, qrCodeUrl, secretKey, inputs, setInputs, err
 	}, [ error, inputs ] );
 
 	const handleComplete = useCallback( ( isComplete ) => setIsInputComplete( isComplete ), [] );
-	const handleClearClick = useCallback( () => setInputs( Array( 6 ).fill( '' ) ), [] );
+	const handleClearClick = useCallback( () => {
+		setInputs( Array( 6 ).fill( '' ) );
+		setIsInputComplete( false );
+	}, [] );
 
 	const canSubmit = qrCodeUrl && secretKey && isInputComplete;
 

From 1296fb3b1f25f2cbf7c33dd65bb7686d84a1bdf0 Mon Sep 17 00:00:00 2001
From: Adam Wood <adam.wood@automattic.com>
Date: Mon, 15 May 2023 14:21:11 +1200
Subject: [PATCH 4/8] Derive completed state from input values

---
 settings/src/components/auto-tabbing-input.js | 19 ++-----------------
 settings/src/components/totp.js               | 13 ++-----------
 2 files changed, 4 insertions(+), 28 deletions(-)

diff --git a/settings/src/components/auto-tabbing-input.js b/settings/src/components/auto-tabbing-input.js
index 2727bb92..21f1d731 100644
--- a/settings/src/components/auto-tabbing-input.js
+++ b/settings/src/components/auto-tabbing-input.js
@@ -9,27 +9,13 @@ import { useCallback } from '@wordpress/element';
 import NumericControl from './numeric-control';
 
 const AutoTabbingInput = ( props ) => {
-	const { inputs, setInputs, onComplete, error } = props;
+	const { inputs, setInputs, error } = props;
 
 	const handleChange = useCallback( ( value, event, index, inputRef ) => {
 		setInputs( ( prevInputs ) => {
 			const newInputs = [ ...prevInputs ];
 
-			// Clean input
-			if ( value.trim() === '' ) {
-				event.target.value = '';
-				value = '';
-			}
-
-			newInputs[ index ] = value;
-
-			// Check if all inputs are filled
-			const allFilled = newInputs.every( ( input ) => '' !== input );
-			if ( allFilled && onComplete ) {
-				onComplete( true );
-			} else {
-				onComplete( false );
-			}
+			newInputs[ index ] = value.trim() === '' ? '' : value;
 
 			return newInputs;
 		} );
@@ -51,7 +37,6 @@ const AutoTabbingInput = ( props ) => {
 		if ( inputs.length === paste.length ) {
 			event.preventDefault();
 			setInputs( paste.split( '' ) );
-			onComplete( true );
 		}
 	}, [] );
 
diff --git a/settings/src/components/totp.js b/settings/src/components/totp.js
index 3d9eac13..bcbbe748 100644
--- a/settings/src/components/totp.js
+++ b/settings/src/components/totp.js
@@ -222,21 +222,17 @@ function createQrCode( data ) {
  * @param props.setError
  */
 function SetupForm( { handleEnable, qrCodeUrl, secretKey, inputs, setInputs, error, setError } ) {
-	const [ isInputComplete, setIsInputComplete ] = useState( false );
-
 	useEffect( () => {
 		if ( error && inputs.some( ( input ) => input === '' ) ) {
 			setError( '' );
 		}
 	}, [ error, inputs ] );
 
-	const handleComplete = useCallback( ( isComplete ) => setIsInputComplete( isComplete ), [] );
 	const handleClearClick = useCallback( () => {
 		setInputs( Array( 6 ).fill( '' ) );
-		setIsInputComplete( false );
 	}, [] );
 
-	const canSubmit = qrCodeUrl && secretKey && isInputComplete;
+	const canSubmit = qrCodeUrl && secretKey && inputs.every( ( input ) => !! input );
 
 	return (
 		<Flex
@@ -254,12 +250,7 @@ function SetupForm( { handleEnable, qrCodeUrl, secretKey, inputs, setInputs, err
 			<form className="wporg-2fa__setup-form" onSubmit={ handleEnable }>
 				<p>Enter the six digit code provided by the app:</p>
 
-				<AutoTabbingInput
-					inputs={ inputs }
-					setInputs={ setInputs }
-					error={ error }
-					onComplete={ handleComplete }
-				/>
+				<AutoTabbingInput inputs={ inputs } setInputs={ setInputs } error={ error } />
 
 				<div className="wporg-2fa__submit-btn-container">
 					<Button

From a0a06c601cbe1d41c967ad1ea96c028225c2aa9b Mon Sep 17 00:00:00 2001
From: Adam Wood <adam.wood@automattic.com>
Date: Mon, 15 May 2023 14:58:04 +1200
Subject: [PATCH 5/8] Show an error when the code pasted isn't the same length
 as the inputs

---
 settings/src/components/auto-tabbing-input.js | 16 +++++++++++-----
 settings/src/components/totp.js               |  7 ++++++-
 2 files changed, 17 insertions(+), 6 deletions(-)

diff --git a/settings/src/components/auto-tabbing-input.js b/settings/src/components/auto-tabbing-input.js
index 21f1d731..96132b76 100644
--- a/settings/src/components/auto-tabbing-input.js
+++ b/settings/src/components/auto-tabbing-input.js
@@ -9,7 +9,7 @@ import { useCallback } from '@wordpress/element';
 import NumericControl from './numeric-control';
 
 const AutoTabbingInput = ( props ) => {
-	const { inputs, setInputs, error } = props;
+	const { inputs, setInputs, error, setError } = props;
 
 	const handleChange = useCallback( ( value, event, index, inputRef ) => {
 		setInputs( ( prevInputs ) => {
@@ -32,11 +32,17 @@ const AutoTabbingInput = ( props ) => {
 	}, [] );
 
 	const handlePaste = useCallback( ( event ) => {
-		const paste = event.clipboardData.getData( 'Text' ).replace( /[^0-9]/g, '' );
+		event.preventDefault();
 
-		if ( inputs.length === paste.length ) {
-			event.preventDefault();
-			setInputs( paste.split( '' ) );
+		const newInputs = event.clipboardData
+			.getData( 'Text' )
+			.replace( /[^0-9]/g, '' )
+			.split( '' );
+
+		if ( inputs.length === newInputs.length ) {
+			setInputs( newInputs );
+		} else {
+			setError( 'The code you pasted is not the correct length.' );
 		}
 	}, [] );
 
diff --git a/settings/src/components/totp.js b/settings/src/components/totp.js
index bcbbe748..3d5a6ced 100644
--- a/settings/src/components/totp.js
+++ b/settings/src/components/totp.js
@@ -250,7 +250,12 @@ function SetupForm( { handleEnable, qrCodeUrl, secretKey, inputs, setInputs, err
 			<form className="wporg-2fa__setup-form" onSubmit={ handleEnable }>
 				<p>Enter the six digit code provided by the app:</p>
 
-				<AutoTabbingInput inputs={ inputs } setInputs={ setInputs } error={ error } />
+				<AutoTabbingInput
+					inputs={ inputs }
+					setInputs={ setInputs }
+					error={ error }
+					setError={ setError }
+				/>
 
 				<div className="wporg-2fa__submit-btn-container">
 					<Button

From 345c6c40b445393489664609f23db7ddf9649a46 Mon Sep 17 00:00:00 2001
From: Adam Wood <adam.wood@automattic.com>
Date: Mon, 15 May 2023 14:59:09 +1200
Subject: [PATCH 6/8] Clear the error when the inputs have changed

Instead of when one is empty
---
 settings/src/components/totp.js | 12 +++++++++---
 1 file changed, 9 insertions(+), 3 deletions(-)

diff --git a/settings/src/components/totp.js b/settings/src/components/totp.js
index 3d5a6ced..2f527c4f 100644
--- a/settings/src/components/totp.js
+++ b/settings/src/components/totp.js
@@ -4,7 +4,7 @@
 import apiFetch from '@wordpress/api-fetch';
 import { Button, Notice, Flex } from '@wordpress/components';
 import { Icon, cancelCircleFilled } from '@wordpress/icons';
-import { RawHTML, useCallback, useContext, useEffect, useState } from '@wordpress/element';
+import { RawHTML, useCallback, useContext, useEffect, useRef, useState } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -222,11 +222,17 @@ function createQrCode( data ) {
  * @param props.setError
  */
 function SetupForm( { handleEnable, qrCodeUrl, secretKey, inputs, setInputs, error, setError } ) {
+	const inputsRef = useRef( inputs );
+
 	useEffect( () => {
-		if ( error && inputs.some( ( input ) => input === '' ) ) {
+		const prevInputs = inputsRef.current;
+		inputsRef.current = inputs;
+
+		// Clear the error if any of the inputs have changed
+		if ( error && inputs.some( ( input, index ) => input !== prevInputs[ index ] ) ) {
 			setError( '' );
 		}
-	}, [ error, inputs ] );
+	}, [ error, inputs, inputsRef ] );
 
 	const handleClearClick = useCallback( () => {
 		setInputs( Array( 6 ).fill( '' ) );

From d873da5261391de8431cae4c1cf87202a0ddddf6 Mon Sep 17 00:00:00 2001
From: Adam Wood <adam.wood@automattic.com>
Date: Thu, 18 May 2023 16:10:35 +1200
Subject: [PATCH 7/8] Auto select input contents on focus

---
 settings/src/components/auto-tabbing-input.js | 25 ++++++----
 settings/src/components/numeric-control.js    | 48 ++++++++++++++-----
 2 files changed, 52 insertions(+), 21 deletions(-)

diff --git a/settings/src/components/auto-tabbing-input.js b/settings/src/components/auto-tabbing-input.js
index 96132b76..9478a3fe 100644
--- a/settings/src/components/auto-tabbing-input.js
+++ b/settings/src/components/auto-tabbing-input.js
@@ -11,7 +11,7 @@ import NumericControl from './numeric-control';
 const AutoTabbingInput = ( props ) => {
 	const { inputs, setInputs, error, setError } = props;
 
-	const handleChange = useCallback( ( value, event, index, inputRef ) => {
+	const handleChange = useCallback( ( value, event, index ) => {
 		setInputs( ( prevInputs ) => {
 			const newInputs = [ ...prevInputs ];
 
@@ -19,18 +19,26 @@ const AutoTabbingInput = ( props ) => {
 
 			return newInputs;
 		} );
+	}, [] );
 
-		if ( value && '' !== value.trim() && inputRef.current.nextElementSibling ) {
-			inputRef.current.nextElementSibling.focus();
+	const handleKeyUp = useCallback( ( value, event, index, inputElement ) => {
+		// Ignore keys associated with input navigation and paste events.
+		if ( [ 'Tab', 'Shift', 'Meta' ].includes( event.key ) ) {
+			return;
 		}
-	}, [] );
 
-	const handleKeyDown = useCallback( ( value, event, index, inputRef ) => {
-		if ( event.key === 'Backspace' && ! value && inputRef.current.previousElementSibling ) {
-			inputRef.current.previousElementSibling.focus();
+		if ( event.key === 'Backspace' && inputElement.previousElementSibling ) {
+			inputElement.previousElementSibling.focus();
+		} else if ( !! value && inputElement.nextElementSibling ) {
+			inputElement.nextElementSibling.focus();
 		}
 	}, [] );
 
+	const handleFocus = useCallback(
+		( value, event, index, inputElement ) => inputElement.select(),
+		[]
+	);
+
 	const handlePaste = useCallback( ( event ) => {
 		event.preventDefault();
 
@@ -58,7 +66,8 @@ const AutoTabbingInput = ( props ) => {
 					key={ index }
 					index={ index }
 					onChange={ handleChange }
-					onKeyDown={ handleKeyDown }
+					onKeyUp={ handleKeyUp }
+					onFocus={ handleFocus }
 					maxLength="1"
 					required
 				/>
diff --git a/settings/src/components/numeric-control.js b/settings/src/components/numeric-control.js
index 78429427..b13fd64c 100644
--- a/settings/src/components/numeric-control.js
+++ b/settings/src/components/numeric-control.js
@@ -13,27 +13,47 @@ import { useRef, useCallback } from '@wordpress/element';
  * using the underlying `input[type="number"]`, which has some accessibility issues.
  *
  * @param props
+ * @param props.autoComplete
+ * @param props.pattern
+ * @param props.title
+ * @param props.onChange
+ * @param props.onFocus
+ * @param props.onKeyDown
+ * @param props.onKeyUp
+ * @param props.index
+ * @param props.value
+ * @param props.maxLength
+ * @param props.required
  * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/number#accessibility
  * @see https://technology.blog.gov.uk/2020/02/24/why-the-gov-uk-design-system-team-changed-the-input-type-for-numbers/
  * @see https://stackoverflow.com/a/66759105/450127
  */
-export default function NumericControl( props ) {
-	const { autoComplete, pattern, title, onChange, onKeyDown, index, value, maxLength, required } =
-		props;
-
+export default function NumericControl( {
+	autoComplete,
+	pattern,
+	title,
+	onChange,
+	onFocus,
+	onKeyDown,
+	onKeyUp,
+	index,
+	value,
+	maxLength,
+	required,
+} ) {
 	const inputRef = useRef( null );
 
-	const handleChange = useCallback(
+	const createHandler = ( handler ) => ( event ) =>
 		// Most callers will only need the value, so make it convenient for them.
-		( event ) => onChange && onChange( event.target.value, event, index, inputRef ),
-		[]
-	);
+		handler && handler( event.target.value, event, index, inputRef.current );
 
-	const handleKeyDown = useCallback(
-		// Most callers will only need the value, so make it convenient for them.
-		( event ) => onKeyDown && onKeyDown( event.target.value, event, index, inputRef ),
-		[]
-	);
+	const handleChange = useCallback( createHandler( onChange ), [] );
+
+	const handleFocus = useCallback( createHandler( onFocus ), [] );
+
+	const handleKeyDown = useCallback( createHandler( onKeyDown ), [] );
+
+	const handleKeyUp = useCallback( createHandler( onKeyUp ), [] );
 
 	return (
 		<input
@@ -44,7 +64,9 @@ export default function NumericControl( props ) {
 			pattern={ pattern || '[0-9 ]*' }
 			title={ title || 'Only numbers and spaces are allowed' }
 			onChange={ handleChange }
+			onFocus={ handleFocus }
 			onKeyDown={ handleKeyDown }
+			onKeyUp={ handleKeyUp }
 			data-1p-ignore // Prevent 1Password from showing up
 			value={ value }
 			maxLength={ maxLength }

From 5c374b3ad1fc61c74562ec9f9e871fb7b0325aaa 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 8/8] 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"