diff --git a/.changeset/itchy-cycles-sell.md b/.changeset/itchy-cycles-sell.md new file mode 100644 index 0000000000..197c61b142 --- /dev/null +++ b/.changeset/itchy-cycles-sell.md @@ -0,0 +1,5 @@ +--- +'@clerk/clerk-js': patch +--- + +Fixes issue where `FormFeedback` was rendering two elements with the same `id` attribute leading to invalid markup. diff --git a/packages/clerk-js/src/ui/elements/FieldControl.tsx b/packages/clerk-js/src/ui/elements/FieldControl.tsx index 545f339ee2..0b92459684 100644 --- a/packages/clerk-js/src/ui/elements/FieldControl.tsx +++ b/packages/clerk-js/src/ui/elements/FieldControl.tsx @@ -154,11 +154,12 @@ const FieldLabelRow = (props: PropsWithChildren) => { }; const FieldFeedback = (props: Pick) => { - const { fieldId, debouncedFeedback } = useFormField(); + const { fieldId, debouncedFeedback, errorMessageId } = useFormField(); return ( ['debounced'] & { id: FieldId }> & { + errorMessageId?: string; elementDescriptors?: Partial>; center?: boolean; sx?: ThemableCssProp; }; export const FormFeedback = (props: FormFeedbackProps) => { - const { id, elementDescriptors, sx, feedback, feedbackType = 'info', center = false } = props; + const { id, elementDescriptors, sx, feedback, feedbackType = 'info', center = false, errorMessageId } = props; const feedbacksRef = useRef<{ a?: Feedback; b?: Feedback; @@ -142,6 +143,10 @@ export const FormFeedback = (props: FormFeedbackProps) => { return { elementDescriptor: descriptor, elementId: id ? descriptor?.setId?.(id) : undefined, + // We only want the id applied when the feedback type is an error + // to avoid having multiple elements in the dom with the same id attribute. + // We also only have aria-describedby applied to the input when it is an error. + id: type === 'error' ? errorMessageId : undefined, }; };