[Toolbar(V2)] ToolbarButton with Modals Menu rendered in the wrong place

[gitgdako]

Describe the bug

Adding a Menu to a ToolbarButton using state or the Modals API (https://sap.github.io/ui5-webcomponents-react/v2/?path=/docs/user-feedback-modals--docs) doesnt render the menu in the right place.

The above code sample is basically just copied from the doc

import {
  MenuItem,
  Modals,
  Toolbar,
  ToolbarButton,
} from '@ui5/webcomponents-react';
...
<Toolbar>
  <ToolbarButton
    id="modals-show-menu"
    text={'Show menu'}
    onClick={() => {
      Modals.showMenu({
        opener: 'modals-show-menu',
        headerText: 'Menu Title',
        children: (
          <>
            <MenuItem text={'Click me'} onClick={() => {}} />
          </>
        ),
      });
    }}
  />
</Toolbar>

There are several things which might be unrelated that I have also noticed:
The behaviour doesnt change where we place the element
Toasts are showing a similar behaviour in some cases, dependent on where in the tree the element is placed
The menu is displayed properly using @ui5/webcomponents-react-compat Toolbar (Legacy) with a standard button
We are having similar issues in the latest 1.x versions of webcomponents(-react)

Isolated Example

https://stackblitz.com/edit/github-f9pvpx

Reproduction steps

No response

Expected Behaviour

The Menu is displayed attached to the ToolbarButton

Screenshots or Videos

You can see the menu attached at the wrong place in the bottom left

UI5 Web Components for React Version

2.2.0

UI5 Web Components Version

2.3.0

Browser

Chrome

Operating System

Windows 11

Additional Context

No response

Relevant log output

No response

Organization

No response

Declaration

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

[Lukas742]

Hi @gitgdako

you're using the same id for multiple elements, this is the reason why it's not working for the button outside of the toolbar opening a Menu.

The ToolbarButton itself is an abstract (docs) ui5 web component and therefore the id is not forwarded to the actual element inside the shadow root.
Usually you should be able using the getDomRef method of the ui5-toolbar-button to get the reference for the actual element, but it doesn't seem to work for the ToolbarButton. I've created an issue for this: #9996

Because of this, it's pretty complicated getting a reference to the actual button where the popover should be opened:

https://stackblitz.com/edit/github-f9pvpx-m5rxp2?file=src%2FApp.tsx,package.json

Since the Toolbar and all of its subcomponents are developed by the ui5-webcomponents team, I'll forward this issue to their repo.

The menu is displayed properly using @ui5/webcomponents-react-compat Toolbar (Legacy) with a standard button
We are having similar issues in the latest 1.x versions of webcomponents(-react)

Please create a dedicated issue for this, since the Toolbar v1 is a completly different component, maintained in the ui5-webcomponents-react repo.

---

Hi Colleagues,

could you please check what the intended way of opening a popover via a ui5-toolbar-button should be? Currently it's only possible by entering the shadowRoot and referencing the respective internal button as opener. in the example above the click handler should mainly be the same as with plain js. If you still need an example without our wrapper or React please let me know.

For the ShellBarItem there was a targetRef event detail introduced for the same reason, maybe this is something to consider here as well.

type ShellBarItemClickEventDetail = {
	targetRef: HTMLElement,
};

[gitgdako]

Sorry for the faulty Code sample.
Thanks for forwarding to the relevant people.
As for the mention of 1.x: I meant the ToolbarV2 in 1.x, which I assume faces the same issue. For us it does not need to be fixed there as we will move to 2.x

[NHristov-sap]

Hello @ui5-webcomponents-topic-p,

It seems the menu is not opened because of undefined getDomRef() returned by ui5-toolbar-button, alse see the related issue #9996

Best Regards,
Nikolay Hristov