From 2e6afd1b893333a7e424718bb0c1dede28193d9a Mon Sep 17 00:00:00 2001
From: Alex Carpenter <im.alexcarpenter@gmail.com>
Date: Mon, 15 Jul 2024 11:29:03 -0400
Subject: [PATCH] fix(elements): ensure updated provided values are sent to the
 machine (#3702)

Co-authored-by: Tom Milewski <me@tm.codes>
---
 .changeset/metal-chairs-shave.md                  |  5 +++++
 packages/elements/src/react/common/form/index.tsx | 14 +++++++-------
 2 files changed, 12 insertions(+), 7 deletions(-)
 create mode 100644 .changeset/metal-chairs-shave.md

diff --git a/.changeset/metal-chairs-shave.md b/.changeset/metal-chairs-shave.md
new file mode 100644
index 0000000000..8daed041b9
--- /dev/null
+++ b/.changeset/metal-chairs-shave.md
@@ -0,0 +1,5 @@
+---
+"@clerk/elements": patch
+---
+
+Ensure updated provided values to controlled inputs are sent to the machine
diff --git a/packages/elements/src/react/common/form/index.tsx b/packages/elements/src/react/common/form/index.tsx
index 13146b6cbe..69fc7fb94b 100644
--- a/packages/elements/src/react/common/form/index.tsx
+++ b/packages/elements/src/react/common/form/index.tsx
@@ -193,7 +193,7 @@ const useField = ({ name }: Partial<Pick<FieldDetails, 'name'>>) => {
 
 const useInput = ({
   name: inputName,
-  value: initialValue,
+  value: providedValue,
   type: inputType,
   onChange: onChangeProp,
   onBlur: onBlurProp,
@@ -265,7 +265,7 @@ const useInput = ({
       return;
     }
 
-    ref.send({ type: 'FIELD.ADD', field: { name, value: initialValue } });
+    ref.send({ type: 'FIELD.ADD', field: { name, value: providedValue } });
 
     return () => ref.send({ type: 'FIELD.REMOVE', field: { name } });
   }, [ref]); // eslint-disable-line react-hooks/exhaustive-deps
@@ -274,7 +274,7 @@ const useInput = ({
   const onChange = React.useCallback(
     (event: React.ChangeEvent<HTMLInputElement>) => {
       onChangeProp?.(event);
-      if (!name || initialValue) {
+      if (!name) {
         return;
       }
       ref.send({ type: 'FIELD.UPDATE', field: { name, value: event.target.value } });
@@ -282,7 +282,7 @@ const useInput = ({
         validatePassword(event.target.value);
       }
     },
-    [ref, name, onChangeProp, initialValue, shouldValidatePassword, validatePassword],
+    [ref, name, onChangeProp, shouldValidatePassword, validatePassword],
   );
 
   const onBlur = React.useCallback(
@@ -306,11 +306,11 @@ const useInput = ({
   );
 
   React.useEffect(() => {
-    if (!initialValue || !name) {
+    if (!name) {
       return;
     }
-    ref.send({ type: 'FIELD.UPDATE', field: { name, value: initialValue } });
-  }, [name, ref, initialValue]);
+    ref.send({ type: 'FIELD.UPDATE', field: { name, value: providedValue } });
+  }, [name, ref, providedValue]);
 
   // TODO: Implement clerk-js utils
   const shouldBeHidden = false;