feat(ui): autofocus next input when confirming seed phrase backup (#718)

joinmarket-webui · Jan 25, 2024 · 27e687c · 27e687c
1 parent 7006e57
commit 27e687c
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 1 deletion.
diff --git a/src/components/MnemonicPhraseInput.tsx b/src/components/MnemonicPhraseInput.tsx
@@ -1,3 +1,4 @@
+import { useEffect, useRef, useState } from 'react'
 import MnemonicWordInput from './MnemonicWordInput'
 
 interface MnemonicPhraseInputProps {
@@ -15,6 +16,20 @@ export default function MnemonicPhraseInput({
   isValid,
   onChange,
 }: MnemonicPhraseInputProps) {
+  const [activeIndex, setActiveIndex] = useState(0)
+  const inputRefs = useRef<HTMLInputElement[]>([])
+
+  useEffect(() => {
+    if (activeIndex < mnemonicPhrase.length && isValid && isValid(activeIndex)) {
+      const nextIndex = activeIndex + 1
+      setActiveIndex(nextIndex)
+
+      if (inputRefs.current[nextIndex]) {
+        inputRefs.current[nextIndex].focus()
+      }
+    }
+  }, [mnemonicPhrase, activeIndex, isValid])
+
   return (
     <div className="container slashed-zeroes p-0">
       {mnemonicPhrase.map((_, outerIndex) => {
@@ -26,9 +41,11 @@ export default function MnemonicPhraseInput({
           <div className="row mb-4" key={outerIndex}>
             {wordGroup.map((givenWord, innerIndex) => {
               const wordIndex = outerIndex + innerIndex
+              const isCurrentActive = wordIndex === activeIndex
               return (
                 <div className="col" key={wordIndex}>
                   <MnemonicWordInput
+                    forwardRef={(el: HTMLInputElement) => (inputRefs.current[wordIndex] = el)}
                     index={wordIndex}
                     value={givenWord}
                     setValue={(value, i) => {
@@ -37,6 +54,8 @@ export default function MnemonicPhraseInput({
                     }}
                     isValid={isValid ? isValid(wordIndex) : undefined}
                     disabled={isDisabled ? isDisabled(wordIndex) : undefined}
+                    onFocus={() => setActiveIndex(wordIndex)}
+                    autoFocus={isCurrentActive}
                   />
                 </div>
               )

diff --git a/src/components/MnemonicWordInput.tsx b/src/components/MnemonicWordInput.tsx
@@ -3,19 +3,32 @@ import { useTranslation } from 'react-i18next'
 import styles from './MnemonicWordInput.module.css'
 
 interface MnemonicWordInputProps {
+  forwardRef: (el: HTMLInputElement) => void
   index: number
   value: string
   setValue: (value: string, index: number) => void
   isValid?: boolean
   disabled?: boolean
+  onFocus?: () => void
+  autoFocus?: boolean
 }
 
-const MnemonicWordInput = ({ index, value, setValue, isValid, disabled }: MnemonicWordInputProps) => {
+const MnemonicWordInput = ({
+  forwardRef,
+  index,
+  value,
+  setValue,
+  isValid,
+  disabled,
+  onFocus,
+  autoFocus,
+}: MnemonicWordInputProps) => {
   const { t } = useTranslation()
   return (
     <rb.InputGroup>
       <rb.InputGroup.Text className={styles.seedwordIndexBackup}>{index + 1}.</rb.InputGroup.Text>
       <rb.Form.Control
+        ref={forwardRef}
         type="text"
         placeholder={`${t('create_wallet.placeholder_seed_word_input')} ${index + 1}`}
         value={value}
@@ -24,6 +37,8 @@ const MnemonicWordInput = ({ index, value, setValue, isValid, disabled }: Mnemon
         disabled={disabled}
         isInvalid={isValid === false && value.length > 0}
         isValid={isValid === true}
+        onFocus={onFocus}
+        autoFocus={autoFocus}
         required
       />
     </rb.InputGroup>