Skip to content

Commit

Permalink
Exclude id from TextField DOMProps (#6140)
Browse files Browse the repository at this point in the history
Co-authored-by: Yihui Liao <44729383+yihuiliao@users.noreply.github.com>
  • Loading branch information
corydeppen and yihuiliao committed Apr 4, 2024
1 parent 68004a1 commit 4f26a4b
Show file tree
Hide file tree
Showing 2 changed files with 16 additions and 1 deletion.
5 changes: 4 additions & 1 deletion packages/react-aria-components/src/TextField.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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}
Expand Down
12 changes: 12 additions & 0 deletions packages/react-aria-components/test/TextField.test.js
Original file line number Diff line number Diff line change
Expand Up @@ -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');
});
});
});

0 comments on commit 4f26a4b

Please sign in to comment.