search

etn-ccis / blui-react-component-library

Re-usable React components for use in Brightlayer UI applications
BSD 3-Clause "New" or "Revised" License
16 stars 10 forks source link

User Menu does not close when an item in the Drawer is clicked (in DrawerLayout) #874

Open joebochill opened 3 months ago

joebochill commented 3 months ago

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?

  1. Open the User Menu.
  2. Click any place/item in the Navigation Drawer. (User Menu does not close)
  3. Click any place outside the Navigation Drawer. (User Menu will close)

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:

image

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.

ektaghag-eaton commented 3 months ago

Update the readme with this known issue and add a workaround to how to fix it.

surajeaton commented 2 months ago

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.