Skip to content
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.

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

[Select] Not inheriting disabled from parent fieldset #2417

Open
piotrkulpinski opened this issue Sep 27, 2023 · 6 comments · May be fixed by #3174
Open

[Select] Not inheriting disabled from parent fieldset #2417

piotrkulpinski opened this issue Sep 27, 2023 · 6 comments · May be fixed by #3174

Comments

@piotrkulpinski
Copy link

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:

<Select.Root disabled>
  (...)
</Select.Root>

This doesn't:

<fieldset disabled>
  <Select.Root>
    (...)
  </Select.Root>
</fieldset>

Expected behavior

A select root to inherit disabled attribute from parent fieldset.

@piotrkulpinski
Copy link
Author

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

@javiaggomezz
Copy link

javiaggomezz commented Sep 29, 2023

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'>

@glocore
Copy link

glocore commented Nov 6, 2023

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

@BrendanC23
Copy link

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>
);

@kluplau
Copy link

kluplau commented Aug 23, 2024

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>
);

@ojj1123
Copy link

ojj1123 commented Oct 10, 2024

#3174

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging a pull request may close this issue.

7 participants