Skip to content

[combo-box] Fix applying data-readOnly for ComboboxTrigger #5418

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
sai6855 wants to merge 3 commits into
base: master
Choose a base branch
from
+21 −0
Open

[combo-box] Fix applying data-readOnly for ComboboxTrigger #5418

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
135b138
[combo-box] Fix applying `data-readOnly` for ComboboxTrigger
sai6855 Aug 5, 2026
5a4011b
fix docs
sai6855 Aug 5, 2026
e246e74
Merge branch 'master' into data-read-combobo
sai6855 Aug 5, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 14 additions & 0 deletions packages/react/src/combobox/trigger/ComboboxTrigger.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -226,6 +226,20 @@ describe('<Combobox.Trigger />', () => {
});

describe('prop: readOnly', () => {
it('applies the data-readonly style hook only when readOnly', async () => {
const { setProps } = await render(
<Combobox.Root readOnly>
<Combobox.Trigger data-testid="trigger">Open</Combobox.Trigger>
</Combobox.Root>,
);

const trigger = screen.getByTestId('trigger');
expect(trigger).toHaveAttribute('data-readonly', '');

await setProps({ readOnly: false });
expect(trigger).not.toHaveAttribute('data-readonly');
});

it('should not open popup when readOnly', async () => {
const { user } = await render(
<Combobox.Root readOnly>
Expand Down
5 changes: 5 additions & 0 deletions packages/react/src/combobox/trigger/ComboboxTrigger.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -144,6 +144,7 @@ export const ComboboxTrigger = React.forwardRef(function ComboboxTrigger(

const state: ComboboxTriggerState = {
...fieldState,
readOnly,

@sai6855 sai6855 Aug 5, 2026

Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

data-readOnly wasn't added when root was set to readOnly. adding readOnly state here fixed the issue

open,
disabled,
popupSide,
Expand Down Expand Up @@ -284,6 +285,10 @@ export interface ComboboxTriggerState extends FieldRootState {
* Whether the component should ignore user interaction.
*/
disabled: boolean;
/**
* Whether the component should ignore user edits.
*/
readOnly: boolean;
/**
* Indicates which side the corresponding popup is positioned relative to its anchor.
*/
Expand Down
Loading