Allow to use `usePortal` on the Menu component.
See original GitHub issueWhen the menu trigger is within an overflown element it’s necessary to render the menu using a portal in the same way it’s already possible with the Popover
component.
Describe the solution you’d like
Same interface as the Popover component, just another prop usePortal: boolean;
Describe alternatives you’ve considered
I tried implementing myself by passing the prop all the way down to the Popper component but I got an error that I was not sure how to fix with the focusableItems
Issue Analytics
- State:
- Created 4 years ago
- Reactions:1
- Comments:11 (6 by maintainers)
Top Results From Across the Web
Portals - React
Portals provide a first-class way to render children into a DOM node that exists outside the DOM hierarchy of the parent component. ReactDOM.createPortal(child, ......
Read more >Learn React Portals by example - LogRocket Blog
In this code, we defined a usePortal Hook, which allows the user to display a Portal element at a given HTML selector. In...
Read more >Using React Portals to Render Children Outside the DOM ...
This is a special ReactDOM method that accepts the children and the element we created. To see how the Portal works, let's make...
Read more >React: Using portals to make a modal popup
I'm going to take the relatively simple createPortal and add a layer of complexity and contain it within a component. Hopefully this will...
Read more >The Menu Component - React-admin - Marmelab
You can create a custom menu component using react-admin's <Menu> , <Menu. ... component makes use of the React Router NavLink component, hence...
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
@segunadebayo here is a sandbox that reproduces this. If you don’t set usePortal=true on the MenuList, then the menu gets cut off. If you do usePortal then you get an error about the focusableItems. focusableItems is null at the time of opening the menu.
Turning autoSelect off gets past this error, but then other things don’t work such as the closeOnBlur. Seems that a various number of things need to be changed to allow the portal.
https://codesandbox.io/s/beautiful-cray-dk9eq
For someone still stuck on v0.8.x unfortunately, is there a workaround or a patch for this? Our codebase is quite large and I don’t have the resources (yet) to start migrating to 1.x, so I’d appreciate any help here.