From 7eab5488cb01284e69859c440676ba9b40133d06 Mon Sep 17 00:00:00 2001 From: panteliselef Date: Tue, 19 Dec 2023 15:18:32 +0200 Subject: [PATCH 1/2] fix(clerk-js): Replace `setError(undefined)` with `clearFeedback` for form fields --- .../OrganizationProfile/AddDomainForm.tsx | 2 +- .../OrganizationProfile/ProfileForm.tsx | 2 +- .../ui/components/SignIn/ResetPassword.tsx | 4 ++-- .../clerk-js/src/ui/elements/CodeControl.tsx | 4 ++-- .../clerk-js/src/ui/utils/errorHandler.ts | 7 ++++++- .../clerk-js/src/ui/utils/useFormControl.ts | 20 ++++++------------- 6 files changed, 18 insertions(+), 21 deletions(-) diff --git a/packages/clerk-js/src/ui/components/OrganizationProfile/AddDomainForm.tsx b/packages/clerk-js/src/ui/components/OrganizationProfile/AddDomainForm.tsx index 704151fe0cc..1252075ec0a 100644 --- a/packages/clerk-js/src/ui/components/OrganizationProfile/AddDomainForm.tsx +++ b/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) diff --git a/packages/clerk-js/src/ui/components/OrganizationProfile/ProfileForm.tsx b/packages/clerk-js/src/ui/components/OrganizationProfile/ProfileForm.tsx index ed7e6de8b5f..af6f7a3192b 100644 --- a/packages/clerk-js/src/ui/components/OrganizationProfile/ProfileForm.tsx +++ b/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 ( diff --git a/packages/clerk-js/src/ui/components/SignIn/ResetPassword.tsx b/packages/clerk-js/src/ui/components/SignIn/ResetPassword.tsx index 6382f118d32..e9fa924ca0c 100644 --- a/packages/clerk-js/src/ui/components/SignIn/ResetPassword.tsx +++ b/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, diff --git a/packages/clerk-js/src/ui/elements/CodeControl.tsx b/packages/clerk-js/src/ui/elements/CodeControl.tsx index a26f27f80ba..61830e09bff 100644 --- a/packages/clerk-js/src/ui/elements/CodeControl.tsx +++ b/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); }; diff --git a/packages/clerk-js/src/ui/utils/errorHandler.ts b/packages/clerk-js/src/ui/utils/errorHandler.ts index 9864611c52e..a85b2467fa9 100644 --- a/packages/clerk-js/src/ui/utils/errorHandler.ts +++ b/packages/clerk-js/src/ui/utils/errorHandler.ts @@ -32,7 +32,12 @@ function setFieldErrors(fieldStates: Array>, 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(); + } }); } diff --git a/packages/clerk-js/src/ui/utils/useFormControl.ts b/packages/clerk-js/src/ui/utils/useFormControl.ts index 52f8200e9eb..9cdf7d9c660 100644 --- a/packages/clerk-js/src/ui/utils/useFormControl.ts +++ b/packages/clerk-js/src/ui/utils/useFormControl.ts @@ -52,7 +52,7 @@ type FieldStateProps = { onFocus: React.FocusEventHandler; 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 = { } & Omit; export type FormControlState = FieldStateProps & { - 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,26 +108,18 @@ export const useFormControl = ( 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' }); - } + 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'] = () => { From 35d791e859ece66d7e486d44c87df763dc38a097 Mon Sep 17 00:00:00 2001 From: panteliselef Date: Tue, 19 Dec 2023 15:19:16 +0200 Subject: [PATCH 2/2] fix(clerk-js): Replace `setError(undefined)` with `clearFeedback` for form fields --- .changeset/mean-frogs-hammer.md | 2 ++ 1 file changed, 2 insertions(+) create mode 100644 .changeset/mean-frogs-hammer.md diff --git a/.changeset/mean-frogs-hammer.md b/.changeset/mean-frogs-hammer.md new file mode 100644 index 00000000000..a845151cc84 --- /dev/null +++ b/.changeset/mean-frogs-hammer.md @@ -0,0 +1,2 @@ +--- +---