I should also add, that the underlying element gets marked as disabled properly, but you still can open the dialog and select values.

You can use css to remove the pointer events when the object is disabled, im using tailwindcss but you can do it with vanilla as well

<RadixSelect.Trigger className='disabled:pointer-events-none'>

You can use css to remove the pointer events when the object is disabled, im using tailwindcss but you can do it with vanilla as well

<RadixSelect.Trigger className='disabled:pointer-events-none'>

• The field is still keyboard accessible
• cursor: not-allowed doesn't work

I'm also running into this issue. I'm using Shadcn, which uses Radix's select implementation. One workaround is to keep track of whether the select is within a disabled fieldset or not. The disabled attribute can then be added to the button element, which will then behave as being properly disabled.

const ref = useRef<HTMLButtonElement>(null);
const isInDisabledFieldset = Boolean(ref.current?.closest("fieldset:disabled"));

return (
    <Select.Root>
        <Select.Trigger ref={ref} disabled={isInDisabledFieldset}>
        </Select.Trigger>
    </Select.Root>
);

I used @BrendanC23's great idea, but had to put the disabled prop on the Select.Root, still with the ref on the Select.Trigger, in order to make it work.

const ref = useRef<HTMLButtonElement>(null);
const isInDisabledFieldset = Boolean(ref.current?.closest("fieldset:disabled"));

return (
    <Select.Root disabled={isInDisabledFieldset}>
        <Select.Trigger ref={ref}>
        </Select.Trigger>
    </Select.Root>
);

#3174

I opened the PR for solving this issue! Check it out!