Comments (3)
Hey!
This is the expected behavior, the static
prop only makes sure that the MenuItems
are visually rendered and ignore the internal open
state. The Menu
component itself is not actually "open" from a functionality perspective.
The main reason this prop exists is if you want to use a 3rd party tool for transitions such as framer-motion because that will control the mounting / unmounting at the correct time.
If you are not using another tool / component for transitioning the MenuItems
component, then you can safely remove the static
prop.
Hope this helps!
from headlessui.
Hey Robin,
Thanks for checking that one.
To be clear, with v1.7 you could programatically open/hide the dropdown as per what the documentation states at https://headlessui.com/v1/react/menu#showing-hiding-the-menu and https://headlessui.com/v1/react/menu#transitions. Now, the v2 documentation doesn't have those sections so I was fearing that the feature was gone.
Here's a quick v1.7 example showing that the hover behaves correctly with static menus that can be programatically opened: https://codesandbox.io/p/devbox/crazy-moon-pm4h3r?file=%2Fsrc%2FDemoMenu.jsx
When hovering over the menu items, render prop active
is set to true even though the menu is static. If you just update headless ui dep to v2.0.3, thus using the deprecated Menu.Item
components and the deprecated active
render prop, this behaves differently: you need to click on the menu button for active
(or the new focus
render prop) to be set to true. This change breaks any desired custom behavior although the old prop and components are just deprecated.
I mean, it was easy to implement sub menus in v1.7, that the component is lacking right now, using the static
prop or Transition show
prop when using transitions.
Is this a desired design change and the solutions are either to stick with v1.7 or hack around?
from headlessui.
I've just checked current menu code base and it looks like the __demoMode
prop of Menu
let us get that same old behavior, allowing to programatically open/hide dropdown. Simple hack for sure.
from headlessui.
Related Issues (20)
- Combobox: after searching and clicking on a list item, the input value is not updated HOT 2
- Combobox v2 issue with dynamic fetched options in nextjs HOT 1
- Issue after upgrading healdessui to latest version in a react17 project: Uncaught TypeError: (0 , import_react45.useId HOT 1
- Clicking on a Switch inside of a PopoverPanel closes the Popover HOT 1
- Combobox scroll jitter when scrolling long list after an option is selected
- Combobox with virtual scrolling not showing up HOT 1
- Dropdown components are missing prop "modal" HOT 2
- Opening Healdess UI Dialog (Modal) via another Dialog (Modal) closes the previous Dialog (Modal) automatically? HOT 2
- [DOCS]: ListboxOptions change from v1.7 to v2.0 is missing active HOT 1
- [DOCS]: Fieldset/Select example styling is off (Chrome) HOT 1
- Combobox's `onChange` also fires on no change HOT 3
- [DOCS]: Help migrating to v2 HOT 2
- Weird tailwind class name injection in V2
- Combobox overrides HTML styles with overflow:hidden when menu opened HOT 6
- V2 Bug - Disabled checkbox selected when navigating by tab HOT 1
- Checkbox transition stops working if the checked state is managed externally HOT 1
- [DOCS]: Listbox states that "Enter" on button will open the listbox HOT 1
- [DOCS]: Listbox / Combobox anchor max height
- MenuItems State Not Updating Without Button Data in HeadlessUI v2 - Worked Fine in v1
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.