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.

Sign up for GitHub

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

Jump to bottom

ui-disabled doesn't work for Tabs #2864

Closed
bmulholland opened this issue Dec 4, 2023 · 1 comment · Fixed by #2918
Closed

ui-disabled doesn't work for Tabs #2864

bmulholland opened this issue Dec 4, 2023 · 1 comment · Fixed by #2918
Assignees
@RobinMalfait

Comments

@bmulholland
Copy link

bmulholland commented Dec 4, 2023 •
edited

What package within Headless UI are you using?

@headlessui/vue, @headlessui/tailwindcss

What version of that package are you using?

@headlessui/vue: 1.7.16
@headlessui/tailwindcss: 0.2.0

What browser are you using?

Firefox

Reproduction URL

Well, I tried to create one, using the linked template and dropping in the literal example from headlessui.com. But that doesn't work, it throws some weird error I don't understand. I'm not going to debug the sandbox provided, so hopefully this is all you need. I added the class that should illustrate the problem but can't confirm this illustrates it because nothing will load. Hopefully the sandbox and sample code on headlessui.com can be made compatible, too, for future repros.

Attempted repro here

Describe your issue

Tabs can be disabled, and it seems natural that ui-disabled would be applied in that case. Doesn't seem to be, though, and the docs are so light on examples of usage of these that it's left to an exercise to the reader to assume this would work. I'm therefore not really sure if this is intentionally not enabled or what...
@RobinMalfait RobinMalfait self-assigned this Jan 9, 2024
RobinMalfait added a commit that referenced this issue Jan 9, 2024
@RobinMalfait
expose disabled on <Tab/> component
67672e6 
This will expose it such that you can use it with `ui-disabled`. In the
Alpha version of React, you can also use `data-[disabled]` because it
will be exposed as `data-disabled` over there as well.

Fixes: #2864
@RobinMalfait RobinMalfait mentioned this issue Jan 9, 2024
Merged
RobinMalfait added a commit that referenced this issue Jan 9, 2024
@RobinMalfait
Expose disabled state on <Tab /> component (#2918)
2b7a57e 
* expose `disabled` on `<Tab/>` component

This will expose it such that you can use it with `ui-disabled`. In the
Alpha version of React, you can also use `data-[disabled]` because it
will be exposed as `data-disabled` over there as well.

Fixes: #2864

* update changelog
@RobinMalfait
Copy link
Collaborator

This should be fixed by #2918, and will be available in the next release.

You can already try it using:

  • npm install @headlessui/react@insiders.
  • npm install @headlessui/vue@insiders.

RobinMalfait added a commit that referenced this issue Apr 15, 2024
@RobinMalfait
Expose disabled state on <Tab /> component (#2918)
369be39 
* expose `disabled` on `<Tab/>` component

This will expose it such that you can use it with `ui-disabled`. In the
Alpha version of React, you can also use `data-[disabled]` because it
will be exposed as `data-disabled` over there as well.

Fixes: #2864

* update changelog
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@RobinMalfait RobinMalfait

Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Expose disabled state on <Tab /> component tailwindlabs/headlessui
2 participants
@bmulholland @RobinMalfait