From c203f8b20f1fa1ff704ec904d608d626ef3fcd7c Mon Sep 17 00:00:00 2001 From: Alex Carpenter Date: Thu, 18 Jul 2024 17:26:24 -0400 Subject: [PATCH] fix(elements): Add check for `relatedTarget` to avoid validation running immediately after unsuccessful form submission (#3762) --- .changeset/plenty-snakes-repeat.md | 5 +++++ packages/elements/src/react/common/form/index.tsx | 6 +++++- 2 files changed, 10 insertions(+), 1 deletion(-) create mode 100644 .changeset/plenty-snakes-repeat.md diff --git a/.changeset/plenty-snakes-repeat.md b/.changeset/plenty-snakes-repeat.md new file mode 100644 index 00000000000..332028e099f --- /dev/null +++ b/.changeset/plenty-snakes-repeat.md @@ -0,0 +1,5 @@ +--- +"@clerk/elements": patch +--- + +Fixes issue where an invalid password field was immediately being refocused after submission causing the validation to run and show the success state. diff --git a/packages/elements/src/react/common/form/index.tsx b/packages/elements/src/react/common/form/index.tsx index dbd6553bdbf..28b3571d4b1 100644 --- a/packages/elements/src/react/common/form/index.tsx +++ b/packages/elements/src/react/common/form/index.tsx @@ -298,7 +298,11 @@ const useInput = ({ const onFocus = React.useCallback( (event: React.FocusEvent) => { onFocusProp?.(event); - if (shouldValidatePassword) { + // Check for relatedTarget to avoid validating password when the input + // is programticallly focused after form submission. Avoids the issue + // where an error message would get removed and the success validation + // was shown immediately. + if (shouldValidatePassword && Boolean(event.relatedTarget)) { validatePassword(event.target.value); } },