diff --git a/src/components/MagicCodeInput.js b/src/components/MagicCodeInput.js index dcaa0273f96a..3a9cc6845194 100644 --- a/src/components/MagicCodeInput.js +++ b/src/components/MagicCodeInput.js @@ -103,6 +103,7 @@ function MagicCodeInput(props) { const [input, setInput] = useState(''); const [focusedIndex, setFocusedIndex] = useState(0); const [editIndex, setEditIndex] = useState(0); + const [wasSubmitted, setWasSubmitted] = useState(false); const blurMagicCodeInput = () => { inputRefs.current[editIndex].blur(); @@ -124,9 +125,12 @@ function MagicCodeInput(props) { const validateAndSubmit = () => { const numbers = decomposeString(props.value, props.maxLength); - if (!props.shouldSubmitOnComplete || _.filter(numbers, (n) => ValidationUtils.isNumeric(n)).length !== props.maxLength || props.network.isOffline) { + if (wasSubmitted || !props.shouldSubmitOnComplete || _.filter(numbers, (n) => ValidationUtils.isNumeric(n)).length !== props.maxLength || props.network.isOffline) { return; } + if (!wasSubmitted) { + setWasSubmitted(true); + } // Blurs the input and removes focus from the last input and, if it should submit // on complete, it will call the onFulfill callback. blurMagicCodeInput();