fix(clerk-js): Replace setError(undefined) with clearFeedback for form fields

.changeset/mean-frogs-hammer.md

@@ -0,0 +1,2 @@
+---
+---

packages/clerk-js/src/ui/components/OrganizationProfile/AddDomainForm.tsx

@@ -41,7 +41,7 @@ export const AddDomainForm = withCardStateProvider((props: AddDomainFormProps) =
   const canSubmit = nameField.value.trim() !== '';
 
   const onSubmit = (e: React.FormEvent) => {
-    nameField.setError(undefined);
+    nameField.clearFeedback();
     e.preventDefault();
     return organization
       .createDomain(nameField.value)

packages/clerk-js/src/ui/components/OrganizationProfile/ProfileForm.tsx

@@ -72,7 +72,7 @@ export const ProfileForm = withCardStateProvider((props: ProfileFormProps) => {
 
   const updateSlugField = (val: string) => {
     slugField.setValue(val);
-    slugField.setError(undefined);
+    slugField.clearFeedback();
   };
 
   return (

packages/clerk-js/src/ui/components/SignIn/ResetPassword.tsx

@@ -65,8 +65,8 @@ export const _ResetPassword = () => {
   };
 
   const resetPassword = async () => {
-    passwordField.setError(undefined);
-    confirmField.setError(undefined);
+    passwordField.clearFeedback();
+    confirmField.clearFeedback();
     try {
       const { status, createdSessionId } = await signIn.resetPassword({
         password: passwordField.value,

packages/clerk-js/src/ui/elements/CodeControl.tsx

@@ -65,12 +65,12 @@ export const useFieldOTP: UseFieldOTP = params => {
 
   codeControl.onCodeEntryFinished(code => {
     status.setLoading();
-    codeControlState.setError(undefined);
+    codeControlState.clearFeedback();
     paramsOnCodeEntryFinished(code, resolve, reject);
   });
 
   const onFakeContinue = () => {
-    codeControlState.setError(undefined);
+    codeControlState.clearFeedback();
     paramsOnCodeEntryFinished('', resolve, reject);
   };
 

packages/clerk-js/src/ui/utils/errorHandler.ts

@@ -32,7 +32,12 @@ function setFieldErrors(fieldStates: Array<FormControlState<string>>, errors: Cl
       return err.meta!.paramName === field.id || snakeToCamel(err.meta!.paramName) === field.id;
     });
 
-    field.setError(errorsArray.length ? buildErrorMessage(errorsArray) : undefined);
+    const errorMessage = buildErrorMessage(errorsArray);
+    if (errorsArray.length && errorMessage) {
+      field.setError(errorMessage);
+    } else {
+      field.clearFeedback();
+    }
   });
 }
 

packages/clerk-js/src/ui/utils/useFormControl.ts

@@ -52,7 +52,7 @@ type FieldStateProps<Id> = {
   onFocus: React.FocusEventHandler<HTMLInputElement>;
   feedback: string;
   feedbackType: FeedbackType;
-  setError: (error: string | ClerkAPIError | undefined) => void;
+  setError: (error: string | ClerkAPIError) => void;
   setWarning: (warning: string) => void;
   setSuccess: (message: string) => void;
   setInfo: (info: string) => void;
@@ -63,7 +63,7 @@ type FieldStateProps<Id> = {
 } & Omit<Options, 'defaultChecked'>;
 
 export type FormControlState<Id = string> = FieldStateProps<Id> & {
-  setError: (error: string | ClerkAPIError | undefined) => void;
+  setError: (error: string | ClerkAPIError) => void;
   setSuccess: (message: string) => void;
   setInfo: (info: string) => void;
   setValue: (val: string | undefined) => void;
@@ -108,28 +108,18 @@ export const useFormControl = <Id extends string>(
   const setValue: FormControlState['setValue'] = val => setValueInternal(val || '');
   const setChecked: FormControlState['setChecked'] = checked => setCheckedInternal(checked);
   const setError: FormControlState['setError'] = error => {
-    if (error) {
-      setFeedback({ message: translateError(error), type: 'error' });
-    } else {
-      clearFeedback();
-    }
+    setFeedback({ message: translateError(error), type: 'error' });
   };
   const setSuccess: FormControlState['setSuccess'] = message => {
-    if (message) {
-      setFeedback({ message, type: 'success' });
-    }
+    setFeedback({ message, type: 'success' });
   };
 
   const setWarning: FormControlState['setWarning'] = warning => {
-    if (warning) {
-      setFeedback({ message: translateError(warning), type: 'warning' });
-    }
+    setFeedback({ message: translateError(warning), type: 'warning' });
   };
 
   const setInfo: FormControlState['setInfo'] = info => {
-    if (info) {
-      setFeedback({ message: info, type: 'info' });
-    }
+    setFeedback({ message: info, type: 'info' });
   };
 
   const clearFeedback: FormControlState['clearFeedback'] = () => {