From 65014c06b9c0f39a6b5d244793a890868b055ef4 Mon Sep 17 00:00:00 2001 From: Sam Hariri <137707942+samh-nl@users.noreply.github.com> Date: Tue, 1 Aug 2023 13:39:13 +0200 Subject: [PATCH 1/6] fix: prevent automatic blurring on submit --- src/components/MagicCodeInput.js | 3 --- src/pages/signin/ValidateCodeForm/BaseValidateCodeForm.js | 3 --- 2 files changed, 6 deletions(-) diff --git a/src/components/MagicCodeInput.js b/src/components/MagicCodeInput.js index cea98cfd374..3f1d485248f 100644 --- a/src/components/MagicCodeInput.js +++ b/src/components/MagicCodeInput.js @@ -124,9 +124,6 @@ function MagicCodeInput(props) { if (!props.shouldSubmitOnComplete || _.filter(numbers, (n) => ValidationUtils.isNumeric(n)).length !== props.maxLength || props.network.isOffline) { return; } - // Blurs the input and removes focus from the last input and, if it should submit - // on complete, it will call the onFulfill callback. - blurMagicCodeInput(); props.onFulfill(props.value); }; diff --git a/src/pages/signin/ValidateCodeForm/BaseValidateCodeForm.js b/src/pages/signin/ValidateCodeForm/BaseValidateCodeForm.js index a68f99df6d2..339bd6697d2 100755 --- a/src/pages/signin/ValidateCodeForm/BaseValidateCodeForm.js +++ b/src/pages/signin/ValidateCodeForm/BaseValidateCodeForm.js @@ -208,9 +208,6 @@ function BaseValidateCodeForm(props) { return; } } else { - if (inputValidateCodeRef.current) { - inputValidateCodeRef.current.blur(); - } if (!validateCode.trim()) { setFormError({validateCode: 'validateCodeForm.error.pleaseFillMagicCode'}); return; From e2f4d4e625c9600e86ddb5e14525db284a706bfe Mon Sep 17 00:00:00 2001 From: Sam Hariri <137707942+samh-nl@users.noreply.github.com> Date: Fri, 4 Aug 2023 17:34:16 +0200 Subject: [PATCH 2/6] fix: submit if number entered w/o causing change --- src/components/MagicCodeInput.js | 20 +++++++++++++++----- 1 file changed, 15 insertions(+), 5 deletions(-) diff --git a/src/components/MagicCodeInput.js b/src/components/MagicCodeInput.js index 3f1d485248f..7b0ade65544 100644 --- a/src/components/MagicCodeInput.js +++ b/src/components/MagicCodeInput.js @@ -119,18 +119,23 @@ function MagicCodeInput(props) { }, })); - const validateAndSubmit = () => { - const numbers = decomposeString(props.value, props.maxLength); + /** + * Validate the entered code and submit + * + * @param {String} value + */ + const validateAndSubmit = (value) => { + const numbers = decomposeString(value, props.maxLength); if (!props.shouldSubmitOnComplete || _.filter(numbers, (n) => ValidationUtils.isNumeric(n)).length !== props.maxLength || props.network.isOffline) { return; } - props.onFulfill(props.value); + props.onFulfill(value); }; - useNetwork({onReconnect: validateAndSubmit}); + useNetwork({onReconnect: () => validateAndSubmit(props.value)}); useEffect(() => { - validateAndSubmit(); + validateAndSubmit(props.value); // We have not added: // + the editIndex as the dependency because we don't want to run this logic after focusing on an input to edit it after the user has completed the code. @@ -203,6 +208,11 @@ function MagicCodeInput(props) { const finalInput = composeToString(numbers); props.onChangeText(finalInput); + + // If the same number is pressed, we cannot depend on props.value in useEffect for re-submitting + if (props.value === finalInput) { + validateAndSubmit(finalInput); + } }; /** From 0d4bd8508b28b5830404a6c2d29c99cac17da757 Mon Sep 17 00:00:00 2001 From: Sam Hariri <137707942+samh-nl@users.noreply.github.com> Date: Fri, 4 Aug 2023 17:36:18 +0200 Subject: [PATCH 3/6] style: prettify --- src/components/MagicCodeInput.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/MagicCodeInput.js b/src/components/MagicCodeInput.js index 7b0ade65544..9f9ef6adbfe 100644 --- a/src/components/MagicCodeInput.js +++ b/src/components/MagicCodeInput.js @@ -121,7 +121,7 @@ function MagicCodeInput(props) { /** * Validate the entered code and submit - * + * * @param {String} value */ const validateAndSubmit = (value) => { From d3a97c46f58ca287d981cfac749591e4d4246e9c Mon Sep 17 00:00:00 2001 From: Sam Hariri <137707942+samh-nl@users.noreply.github.com> Date: Thu, 10 Aug 2023 13:24:03 +0200 Subject: [PATCH 4/6] Revert "fix: prevent automatic blurring on submit" This reverts commit 65014c06b9c0f39a6b5d244793a890868b055ef4. --- src/components/MagicCodeInput.js | 3 +++ src/pages/signin/ValidateCodeForm/BaseValidateCodeForm.js | 3 +++ 2 files changed, 6 insertions(+) diff --git a/src/components/MagicCodeInput.js b/src/components/MagicCodeInput.js index 9f9ef6adbfe..0057c4955ff 100644 --- a/src/components/MagicCodeInput.js +++ b/src/components/MagicCodeInput.js @@ -129,6 +129,9 @@ function MagicCodeInput(props) { if (!props.shouldSubmitOnComplete || _.filter(numbers, (n) => ValidationUtils.isNumeric(n)).length !== props.maxLength || props.network.isOffline) { return; } + // Blurs the input and removes focus from the last input and, if it should submit + // on complete, it will call the onFulfill callback. + blurMagicCodeInput(); props.onFulfill(value); }; diff --git a/src/pages/signin/ValidateCodeForm/BaseValidateCodeForm.js b/src/pages/signin/ValidateCodeForm/BaseValidateCodeForm.js index 339bd6697d2..a68f99df6d2 100755 --- a/src/pages/signin/ValidateCodeForm/BaseValidateCodeForm.js +++ b/src/pages/signin/ValidateCodeForm/BaseValidateCodeForm.js @@ -208,6 +208,9 @@ function BaseValidateCodeForm(props) { return; } } else { + if (inputValidateCodeRef.current) { + inputValidateCodeRef.current.blur(); + } if (!validateCode.trim()) { setFormError({validateCode: 'validateCodeForm.error.pleaseFillMagicCode'}); return; From efaad07aaa3d79bd8f8849d712683c8673184dc7 Mon Sep 17 00:00:00 2001 From: Sam Hariri <137707942+samh-nl@users.noreply.github.com> Date: Thu, 10 Aug 2023 14:19:49 +0200 Subject: [PATCH 5/6] fix: focus magic code input upon error --- src/components/MagicCodeInput.js | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/src/components/MagicCodeInput.js b/src/components/MagicCodeInput.js index 0057c4955ff..6ea506831e3 100644 --- a/src/components/MagicCodeInput.js +++ b/src/components/MagicCodeInput.js @@ -137,6 +137,15 @@ function MagicCodeInput(props) { useNetwork({onReconnect: () => validateAndSubmit(props.value)}); + useEffect(() => { + if (!props.hasError) { + return; + } + + // Focus the last input if an error occurred to allow for corrections + inputRefs.current[props.maxLength - 1].focus(); + }, [props.hasError, props.maxLength]); + useEffect(() => { validateAndSubmit(props.value); From 3d8bad4c2d73cffe6185181bcde4bfecc2be1981 Mon Sep 17 00:00:00 2001 From: Sam Hariri <137707942+samh-nl@users.noreply.github.com> Date: Thu, 10 Aug 2023 14:24:00 +0200 Subject: [PATCH 6/6] style: prettify --- src/components/MagicCodeInput.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/MagicCodeInput.js b/src/components/MagicCodeInput.js index 6ea506831e3..0bb1b76ceef 100644 --- a/src/components/MagicCodeInput.js +++ b/src/components/MagicCodeInput.js @@ -141,7 +141,7 @@ function MagicCodeInput(props) { if (!props.hasError) { return; } - + // Focus the last input if an error occurred to allow for corrections inputRefs.current[props.maxLength - 1].focus(); }, [props.hasError, props.maxLength]);