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

Data attributes for CSS-only state styling broken in v1.7.8 #2786

Closed
ramonwenger opened this issue Oct 4, 2023 · 2 comments · Fixed by #2787
Closed

Data attributes for CSS-only state styling broken in v1.7.8 #2786

ramonwenger opened this issue Oct 4, 2023 · 2 comments · Fixed by #2787
Assignees

Comments

@ramonwenger
Copy link

What package within Headless UI are you using?

@headlessui/vue
@headlessui/tailwindcss

What version of that package are you using?

@headlessui/vue: 1.7.8
@headlessui/tailwindcss: 0.1.3

What browser are you using?

Firefox

Reproduction URL

Non-working example: https://codesandbox.io/p/sandbox/infallible-noyce-g43sfp
Working example: https://codesandbox.io/p/sandbox/determined-lamarr-k36cf6

Describe your issue

Version 1.7.8 of @headlessui/vue broke the data attributes introduced in 1.7. Before, as of 1.7.7, the plugin would generate the following code:

<div data-headlessui-state="checked"
  class="relative flex cursor-pointer rounded-lg px-5 py-4 shadow-md focus:outline-none ui-active:ring-2 ui-active:ring-white ui-active:ring-opacity-60 ui-active:ring-offset-2 ui-active:ring-offset-sky-300 ui-checked:bg-sky-900 ui-checked:bg-opacity-75 ui-checked:text-white ui-not-checked:bg-white"
  id="headlessui-radiogroup-option-3" role="radio" aria-checked="true" tabindex="0" aria-labelledby="headlessui-label-4"
  aria-describedby="headlessui-description-5">
 <!-- ... -->
</div>

Note the data-headlessui-state="checked" attribute here.
After upgrading to v1.7.8 (and later versions), the code generated will be this:

<div
  class="relative flex cursor-pointer rounded-lg px-5 py-4 shadow-md focus:outline-none ui-active:ring-2 ui-active:ring-white ui-active:ring-opacity-60 ui-active:ring-offset-2 ui-active:ring-offset-sky-300 ui-checked:bg-sky-900 ui-checked:bg-opacity-75 ui-checked:text-white ui-not-checked:bg-white"
  id="headlessui-radiogroup-option-3" role="radio" aria-checked="true" tabindex="0" aria-labelledby="headlessui-label-4"
  aria-describedby="headlessui-description-5">
<!-- ... -->
</div>

Now the data-headlessui-state attribute is missing completely.
This breaks styling depending upon these data properties, namely the one described at multiple locations in the documentation:

If you are using Tailwind CSS, you can use the @headlessui/tailwindcss plugin to target this attribute with modifiers like ui-open:* and ui-active:*:

Specifically, the commit breaking the functionality is d874e561a1ec4ac65250d76a40cc979cf6983acc , even more specifically, the code replacing the old call to cloneVNode. I found this out by bisecting and testing. I don't know what the correct fix would be though. Maybe @RobinMalfait (or someone else familiar with the code in there) could give some pointers to what needs to be done, then I could even write a PR.

@thecrypticace
Copy link
Contributor

Heh… oops. Thanks for reporting this one.

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

You can try it using our insiders build — this may take a few before it's build and published to NPM:

  • npm install @headlessui/vue@insiders

@ramonwenger
Copy link
Author

Amazing, thank you for the quick fix and also the note on the insiders build, @thecrypticace!

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

Successfully merging a pull request may close this issue.

2 participants