[Menu Component]: Submenu options are getting overlapped and misaligned in toolbar

[ShivamGuptaSap]

Describe the bug

Submenu options are getting overlapped and misaligned in toolbar.

Isolated Example

No response

Reproduction steps

1. Open SubMenus in Menu
2. There we can see the overlapping and mis alignment

3. ...

Expected Behaviour

There shouldn't be any misalignment or overlapping.

Screenshots or Videos

UI5 Web Components for React Version

1.16.0

UI5 Web Components Version

1.14.0

Browser

Chrome

Operating System

No response

Additional Context

No response

Relevant log output

No response

Declaration

• [X] I’m not disclosing any internal or sensitive information.

[Lukas742]

Hi @ShivamGuptaSap

Please follow the guidelines for opening issues. "Menu:" doesn't give information of what the issue is about.

Also, please add a reproducible example as described in our template. From the screenshots, I can't assess the implementation details or the height and width of the viewport, which is important since popovers are supposed to overlap their "opener" element when there is not enough space to fully display both of them.

[ShivamGuptaSap]

Hi @Lukas742, Please check the dummy code https://codesandbox.io/s/charming-bash-jk5phm

If you open the menu multiple times you can see the menu is overlapping with the button You can also see the submenu is overlapping with the Menu

https://github.com/SAP/ui5-webcomponents-react/assets/107616257/78607d53-de41-4593-9741-062634331076

[Lukas742]

The overlapping of the sub-menu seems to be implemented by design (see here)

For the misalignment of the popover, there are two reasons:

• e.target is not always the ui5-toggle-button element, but the actual element where the user clicks on. E.g. if you click on the icon, then the target is ui5-icon. You can prevent that by using currentTarget instead.
• Depending on the state of the button, you're defining the opener on the body of the page, which then will lead to misalignment.

In general, I would recommend using the declarative way of opening popovers in React instead of the imperative one.

[github-actions[bot]]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Inactive issues will be closed after 7 days. Thanks.

[github-actions[bot]]

Hey there, it's me again! I am going close this issue to help our maintainers focus on the current development roadmap instead. If the issue mentioned is still a concern, please first check to see if the maintainers have requested additional input and provide it if necessary, or post a detailed description of why this issue is still a problem.