Open piotrkulpinski opened 9 months ago
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'>
cursor: not-allowed
doesn't workI'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>
);
Bug report
Hi, I just noticed a small, but important issue with Select Primitive. If you wrap it with a
<fieldset disabled></fieldset>
it'll not inherit the disabled attribute. This works like this with every other "form" primitive (radio group, switch, checkbox etc) so I'd also think it should be the same for Select.Current Behavior
This works:
This doesn't:
Expected behavior
A select root to inherit disabled attribute from parent fieldset.