diff --git a/docs/src/app/(docs)/react/components/autocomplete/types.md b/docs/src/app/(docs)/react/components/autocomplete/types.md index 12c4077dda9..22a95a1ad7e 100644 --- a/docs/src/app/(docs)/react/components/autocomplete/types.md +++ b/docs/src/app/(docs)/react/components/autocomplete/types.md @@ -180,6 +180,8 @@ type AutocompleteTriggerState = { popupSide: Side | null; /** Present when the corresponding items list is empty. */ listEmpty: boolean; + /** Whether the component should ignore user edits. */ + readOnly: boolean; /** Whether the field has been touched. */ touched: boolean; /** Whether the field value has changed from its initial value. */ diff --git a/docs/src/app/(docs)/react/components/combobox/types.md b/docs/src/app/(docs)/react/components/combobox/types.md index cd801ef3a69..8a74f371f07 100644 --- a/docs/src/app/(docs)/react/components/combobox/types.md +++ b/docs/src/app/(docs)/react/components/combobox/types.md @@ -185,6 +185,8 @@ type ComboboxTriggerState = { open: boolean; /** 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. */ popupSide: Side | null; /** Present when the corresponding items list is empty. */ diff --git a/packages/react/src/autocomplete/trigger/AutocompleteTrigger.tsx b/packages/react/src/autocomplete/trigger/AutocompleteTrigger.tsx index 79580b95bef..8ea3f953339 100644 --- a/packages/react/src/autocomplete/trigger/AutocompleteTrigger.tsx +++ b/packages/react/src/autocomplete/trigger/AutocompleteTrigger.tsx @@ -30,6 +30,10 @@ export interface AutocompleteTriggerState extends FieldRootState { * Present when the corresponding items list is empty. */ listEmpty: boolean; + /** + * Whether the component should ignore user edits. + */ + readOnly: boolean; } export interface AutocompleteTriggerProps diff --git a/packages/react/src/combobox/trigger/ComboboxTrigger.test.tsx b/packages/react/src/combobox/trigger/ComboboxTrigger.test.tsx index 16c8193aee5..e8e01bc166b 100644 --- a/packages/react/src/combobox/trigger/ComboboxTrigger.test.tsx +++ b/packages/react/src/combobox/trigger/ComboboxTrigger.test.tsx @@ -226,6 +226,20 @@ describe('', () => { }); describe('prop: readOnly', () => { + it('applies the data-readonly style hook only when readOnly', async () => { + const { setProps } = await render( + + Open + , + ); + + 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( diff --git a/packages/react/src/combobox/trigger/ComboboxTrigger.tsx b/packages/react/src/combobox/trigger/ComboboxTrigger.tsx index 70f50144958..d4cc6a9550f 100644 --- a/packages/react/src/combobox/trigger/ComboboxTrigger.tsx +++ b/packages/react/src/combobox/trigger/ComboboxTrigger.tsx @@ -130,6 +130,7 @@ export const ComboboxTrigger = React.forwardRef(function ComboboxTrigger( const state: ComboboxTriggerState = { ...fieldState, + readOnly, open, disabled, popupSide, @@ -270,6 +271,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. */