diff --git a/packages/clerk-js/src/ui/elements/FormControl.tsx b/packages/clerk-js/src/ui/elements/FormControl.tsx index d05c3a97bb..46b47435ee 100644 --- a/packages/clerk-js/src/ui/elements/FormControl.tsx +++ b/packages/clerk-js/src/ui/elements/FormControl.tsx @@ -52,6 +52,7 @@ type FormControlProps = Omit, 'label' | 'placehol feedback: string; feedbackType: FeedbackType; setHasPassedComplexity: (b: boolean) => void; + clearFeedback: () => void; hasPassedComplexity: boolean; infoText?: string | LocalizationKey; radioOptions?: { @@ -284,6 +285,7 @@ export const FormControl = forwardRef {isCheckbox ? ( diff --git a/packages/clerk-js/src/ui/primitives/FormControl.tsx b/packages/clerk-js/src/ui/primitives/FormControl.tsx index 44b15ac646..c62d70a56f 100644 --- a/packages/clerk-js/src/ui/primitives/FormControl.tsx +++ b/packages/clerk-js/src/ui/primitives/FormControl.tsx @@ -5,8 +5,18 @@ import type { FormControlProps } from './hooks'; import { FormControlContextProvider } from './hooks'; export const FormControl = (props: React.PropsWithChildren) => { - const { hasError, id, isRequired, setError, setInfo, setSuccess, setWarning, setHasPassedComplexity, ...rest } = - props; + const { + hasError, + id, + isRequired, + setError, + setInfo, + clearFeedback, + setSuccess, + setWarning, + setHasPassedComplexity, + ...rest + } = props; return ( ) => css={{ position: 'relative', flex: '1 1 auto' }} > {props.children} diff --git a/packages/clerk-js/src/ui/primitives/hooks/useFormControl.tsx b/packages/clerk-js/src/ui/primitives/hooks/useFormControl.tsx index 76b3e2a4de..4ff528b937 100644 --- a/packages/clerk-js/src/ui/primitives/hooks/useFormControl.tsx +++ b/packages/clerk-js/src/ui/primitives/hooks/useFormControl.tsx @@ -16,6 +16,7 @@ export type FormControlProps = { setWarning: (warning: string) => void; setInfo: (info: string) => void; setHasPassedComplexity: (b: boolean) => void; + clearFeedback: () => void; }; type FormControlContextValue = Required & { errorMessageId: string }; @@ -34,6 +35,7 @@ export const FormControlContextProvider = (props: React.PropsWithChildren{props.children}; diff --git a/packages/clerk-js/src/ui/utils/useFormControl.ts b/packages/clerk-js/src/ui/utils/useFormControl.ts index b79de45d5e..46d7e578b5 100644 --- a/packages/clerk-js/src/ui/utils/useFormControl.ts +++ b/packages/clerk-js/src/ui/utils/useFormControl.ts @@ -55,6 +55,7 @@ type FieldStateProps = { setSuccess: (message: string) => void; setInfo: (info: string) => void; setHasPassedComplexity: (b: boolean) => void; + clearFeedback: () => void; hasPassedComplexity: boolean; } & Omit;