Comments (2)
Hey!
The problem you are seeing is that the ui-open
also applies because the Dialog
also exposes that information. To solve this, you can explicitly mark the bg-white
with ui-not-open
:
- <Listbox.Button className="rounded-t-md rounded-b-md ui-open:rounded-b-none bg-white ui-open:bg-sky-300">
+ <Listbox.Button className="rounded-t-md rounded-b-md ui-open:rounded-b-none uit-not-open:bg-white ui-open:bg-sky-300">
It's a bit of an unfortunate situation, but this should solve your issue.
If this still won't work, then you can fallback to using JS based values using render props: https://headlessui.com/react/listbox#using-render-props
We are aware of this inconvenience, and to handle this in a more explicit and reliable way we made the following changes to the next versions of Headless UI and Tailwind CSS (both are currently in an alpha stage, but wanted to share this with you already):
- In Headless UI v2, we expose these values as data attributes directly, this means that you will be able to use
data-[open]:…
directly. - In Tailwind CSS v4, data attributes will be available as
data-open:…
which is easier to type thandata-[open]:…
. - If you combine these with named
group
classes (https://tailwindcss.com/docs/hover-focus-and-other-states#differentiating-nested-groups) then you can add a named group to thelistbox
and handle it explicitly:
This means that eventually, you will be able to do something like this to explicitly target the correct data:
<Listbox as="div" className="group/my-listbox">
<ListboxButton className="group-data-open/my-listbox:…" />
</Listbox>
But for now, explicitly adding ui-not-open:bg-white
or using the render prop should do the trick.
Hope this helps!
from headlessui.
@RobinMalfait truly, thank you for taking the time for such a comprehensive response! ui-not-open
class indeed did the trick and the inputs within the dialog correctly get styled only when they are open. Appreciate the sneak peek to future features as well!
Would you perhaps have at hand any online codesandbox where @headlessui/tailwindcss
plugin is working alongside @headlessui/react
? It would be a hugely helpful asset to make online demos of HeadlessUI components for my team.
from headlessui.
Related Issues (20)
- [DOCS]: PopoverPanel `modal` incorrectly says default=true and makes others inert HOT 2
- Transition - current component <Transition.Child /> is rendering a "Fragment". HOT 2
- Button onClick is not triggered within Dialogs HOT 1
- Unable to click scrollbar of combobox options when being displayed inside a Dialog HOT 4
- Popover panel incorrectly closes when user tabs with keyboard HOT 1
- Scrolling with long content doesn't not work on iOS after outside click
- dispatch `ActionTypes.UpdateVirtualOptions` drops `disabled` function HOT 3
- Bump `@react-aria` versions to address missing source maps and console spam HOT 2
- `style` prop of `ComboboxOptions` is ignored HOT 6
- Headless v2 makes resizeObserver mandatory for testing HOT 2
- React Popover v2: render in a portal breaks use case HOT 5
- Accessibility: Keyboard focus with tab key is trapped within listbox HOT 1
- Tab panels can't be activated & focus trapped in Tab list while using Windows Narrator HOT 2
- __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED and React 19 RC HOT 1
- Bug Conditional className when using DisclosurePanel inside Transition HOT 2
- Vue ComboBox virtual API broken HOT 1
- Release #3263? HOT 1
- Missing ref owner context. ref cannot be used on hoisted vnodes. [ TransitionRoot with vite ] HOT 1
- HeadlessUI/React v2: Popover closes when PopoverButton is hidden
- Using a Switch blocks Command-N from opening a new window in macOS Safari
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from headlessui.