Exclude id from TextField DOMProps (#6140)

Co-authored-by: Yihui Liao <44729383+yihuiliao@users.noreply.github.com>
adobe · Apr 4, 2024 · 4f26a4b · 4f26a4b
1 parent 68004a1
commit 4f26a4b
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 1 deletion.
diff --git a/packages/react-aria-components/src/TextField.tsx b/packages/react-aria-components/src/TextField.tsx
@@ -85,9 +85,12 @@ function TextField(props: TextFieldProps, ref: ForwardedRef<HTMLDivElement>) {
     defaultClassName: 'react-aria-TextField'
   });
 
+  let DOMProps = filterDOMProps(props);
+  delete DOMProps.id;
+
   return (
     <div
-      {...filterDOMProps(props)}
+      {...DOMProps}
       {...renderProps}
       ref={ref}
       slot={props.slot || undefined}

diff --git a/packages/react-aria-components/test/TextField.test.js b/packages/react-aria-components/test/TextField.test.js
@@ -226,5 +226,17 @@ describe('TextField', () => {
       await user.tab();
       expect(input).not.toHaveAttribute('aria-describedby');
     });
+
+    it('should render the id attribute only on the input element', async () => {
+      let {getAllByTestId, getByRole} = render(
+        <TestTextField id="name" input={component} />
+      );
+      let outerEl = getAllByTestId('text-field-test');
+      let input = getByRole('textbox');
+
+      expect(outerEl).toHaveLength(1);
+      expect(outerEl[0]).not.toHaveAttribute('id');
+      expect(input).toHaveAttribute('id', 'name');
+    });
   });
 });