From 03482f347741e6ceef2e654de1b101dc59477f90 Mon Sep 17 00:00:00 2001
From: Alex Carpenter <im.alexcarpenter@gmail.com>
Date: Tue, 19 Nov 2024 09:54:05 -0500
Subject: [PATCH] fix(clerk-js): Only apply id to FormFeedback when the type is
 error (#4552)

---
 .changeset/itchy-cycles-sell.md                    | 5 +++++
 packages/clerk-js/src/ui/elements/FieldControl.tsx | 3 ++-
 packages/clerk-js/src/ui/elements/FormControl.tsx  | 7 ++++++-
 3 files changed, 13 insertions(+), 2 deletions(-)
 create mode 100644 .changeset/itchy-cycles-sell.md

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<FormFeedbackProps, 'elementDescriptors' | 'center'>) => {
-  const { fieldId, debouncedFeedback } = useFormField();
+  const { fieldId, debouncedFeedback, errorMessageId } = useFormField();
 
   return (
     <FormFeedback
       center={props.center}
+      errorMessageId={errorMessageId}
       {...{
         ...debouncedFeedback,
         elementDescriptors: props.elementDescriptors,
diff --git a/packages/clerk-js/src/ui/elements/FormControl.tsx b/packages/clerk-js/src/ui/elements/FormControl.tsx
index b58c2f53c8..c32246a2cd 100644
--- a/packages/clerk-js/src/ui/elements/FormControl.tsx
+++ b/packages/clerk-js/src/ui/elements/FormControl.tsx
@@ -71,13 +71,14 @@ export type FormFeedbackDescriptorsKeys = 'error' | 'warning' | 'info' | 'succes
 type Feedback = { feedback?: string; feedbackType?: FeedbackType; shouldEnter: boolean };
 
 export type FormFeedbackProps = Partial<ReturnType<typeof useFormControlFeedback>['debounced'] & { id: FieldId }> & {
+  errorMessageId?: string;
   elementDescriptors?: Partial<Record<FormFeedbackDescriptorsKeys, ElementDescriptor>>;
   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,
     };
   };