diff --git a/src/components/MnemonicPhraseInput.tsx b/src/components/MnemonicPhraseInput.tsx index 7f6ff21d..cc53a56f 100644 --- 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([]) + + 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 (
{mnemonicPhrase.map((_, outerIndex) => { @@ -26,9 +41,11 @@ export default function MnemonicPhraseInput({
{wordGroup.map((givenWord, innerIndex) => { const wordIndex = outerIndex + innerIndex + const isCurrentActive = wordIndex === activeIndex return (
(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} />
) diff --git a/src/components/MnemonicWordInput.tsx b/src/components/MnemonicWordInput.tsx index eb61abc8..94039cd1 100644 --- 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 ( {index + 1}. 0} isValid={isValid === true} + onFocus={onFocus} + autoFocus={autoFocus} required />