From 899878f5b75164d0275a40ae6e9eccf6839944de Mon Sep 17 00:00:00 2001
From: Alex Carpenter <im.alexcarpenter@gmail.com>
Date: Wed, 13 Nov 2024 15:05:25 -0500
Subject: [PATCH 1/2] fix(clerk-js): Only apply id to FormFeedback when the
 type is error

---
 packages/clerk-js/src/ui/elements/FieldControl.tsx | 3 ++-
 packages/clerk-js/src/ui/elements/FormControl.tsx  | 7 ++++++-
 2 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/packages/clerk-js/src/ui/elements/FieldControl.tsx b/packages/clerk-js/src/ui/elements/FieldControl.tsx
index 545f339ee27..0b92459684e 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 b58c2f53c82..c32246a2cdb 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,
     };
   };
 

From b6eed8e8fccb7f845dc27343ca334a054224b3b0 Mon Sep 17 00:00:00 2001
From: Alex Carpenter <im.alexcarpenter@gmail.com>
Date: Wed, 13 Nov 2024 15:39:17 -0500
Subject: [PATCH 2/2] add changeset

---
 .changeset/itchy-cycles-sell.md | 5 +++++
 1 file changed, 5 insertions(+)
 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 00000000000..197c61b1423
--- /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.