Open joebochill opened 3 months ago
Update the readme with this known issue and add a workaround to how to fix it.
It looks like the styles added in the showcase for DrawerLayout
component are fixing this issue.
Styles : https://github.com/etn-ccis/blui-react-showcase-demo/blob/9d2e0d0b77175818695bfc91c712165125a7771f/src/router/index.tsx#L44
We can add those as default styles to DrawerLayout
component in the blui-react-component-library
.
Describe the bug / expected behavior
We have observed an issue with closing of User Menu component when used within the Drawer component. The User Menu does not close when any item in the Drawer is clicked, but it works when clicked outside of the drawer component region.
What are the steps to reproduce?
Screenshots / Screen recording
N/A
Code snippet / Link to minimum reproduction example
Your environment information
Windows 10, Chrome (latest), Edge (latest)
Suggested fix
As a workaround, you can enable the portal used by the Menu component in the UserMenu:
We will need to see if enabling the portal inside of the UserMenu component causes any adverse effects (I can't remember why we disabled it in the first place).The portal was originally disabled in the component to allow for nested styling of the Menu. If the portal is enabled, then the Menu lives in the presentation container and won't be affected by sx style rules applied to the UserMenu component itself.Anything else to add?
This is caused by the z-indexing logic in the DrawerLayout. The Drawer has its z-index bumped up to cover the main content, but this puts the backdrop of the UserMenu behind the drawer, so clicking the Drawer does not trigger the close of the UserMenu.
reported by Melwyn.