question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Allow to use `usePortal` on the Menu component.

See original GitHub issue

When 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:closed
  • Created 4 years ago
  • Reactions:1
  • Comments:11 (6 by maintainers)

github_iconTop GitHub Comments

3reactions
bjgrossecommented, Mar 6, 2020

@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

1reaction
paambaaticommented, Mar 12, 2021

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.

Read more comments on GitHub >

github_iconTop 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 >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found