diff --git a/.changeset/fix-select-item-user-select-1488.md b/.changeset/fix-select-item-user-select-1488.md new file mode 100644 index 0000000000..6b340b4d89 --- /dev/null +++ b/.changeset/fix-select-item-user-select-1488.md @@ -0,0 +1,5 @@ +--- +'@radix-ui/react-select': patch +--- + +Prevent text selection on Select items to avoid Firefox leaving selection mode active after closing inside a Dialog. diff --git a/packages/react/select/src/select.test.tsx b/packages/react/select/src/select.test.tsx index 6a140906cd..2e243c4cda 100644 --- a/packages/react/select/src/select.test.tsx +++ b/packages/react/select/src/select.test.tsx @@ -140,3 +140,14 @@ describe('clearing an optional value (#2706)', () => { expect(emptyOptions).toHaveLength(1); }); }); + +// Regression test for https://github.com/radix-ui/primitives/issues/1488 +describe('given a select item', () => { + afterEach(cleanup); + + it('should not allow text selection', async () => { + render(); + const option = await waitFor(() => screen.getByRole('option', { name: 'Apple', hidden: true })); + expect(option).toHaveStyle({ userSelect: 'none' }); + }); +}); diff --git a/packages/react/select/src/select.tsx b/packages/react/select/src/select.tsx index 2389471b19..5fadd8ed12 100644 --- a/packages/react/select/src/select.tsx +++ b/packages/react/select/src/select.tsx @@ -1408,6 +1408,7 @@ const SelectItem = React.forwardRef( data-disabled={disabled ? '' : undefined} tabIndex={disabled ? undefined : -1} {...itemProps} + style={{ userSelect: 'none', ...itemProps.style }} ref={composedRefs} onFocus={composeEventHandlers(itemProps.onFocus, () => setIsFocused(true))} onBlur={composeEventHandlers(itemProps.onBlur, () => setIsFocused(false))}