Modals Toast: Component is rendered behind List

[tkeiner]

Describe the bug

When a Toast is shown via the Modals, the Toast message is covered by the List Component. Making the content invisible.
Using the standard Toast Component without Modals, works fine.

In v1 of the web components this was not an issue.

Isolated Example

https://stackblitz.com/edit/github-d34zwy?file=src%2FApp.tsx

Reproduction steps

1. Place List Component over desired Toast Placement spot
2. Place the Modals Component at the same position

Expected Behaviour

Toast should be fully visible.

Screenshots or Videos

UI5 Web Components for React Version

2.4.0

UI5 Web Components Version

2.4.0

Browser

Chrome

Operating System

No response

Additional Context

No response

Relevant log output

No response

Organization

No response

Declaration

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

[Lukas742]

Hi @tkeiner

It seems like that the Toast isn't using the Popover API.
Since we were under the assumption that all ui5 wc popups now use this API, I will transfer the issue to the ui5-webcomponents repository since the toast is being developed there.

As a workaround you can render the Modals component after all other components, or add a dedicated Toast container element after the List for example:
https://stackblitz.com/edit/github-d34zwy-43qsvd?file=src%2FApp.tsx,src%2Fmain.tsx

---

Hi Colleagues,

The Toast isn’t utilizing the popover API, which can cause it to be hidden behind other elements depending on the position where the web component is mounted.
Here you can find a simplified example using only ui5-wc without React or our wrapper: https://stackblitz.com/edit/github-xa5lrs?file=index.html,main.js

[tkeiner]

Hi @Lukas742,
thanks for the provided workaround. It is working fine now.
I just had to switch the order of the App and Modals inside the ThemeProvider from this:

    <ThemeProvider>
      <Modals />
      <App />
    </ThemeProvider>

to this:

    <ThemeProvider>
      <App />
      <Modals />
    </ThemeProvider>

😄

[Todor-ads]

Hello @SAP/ui5-webcomponents-topic-rl ,
Could you please take a look at this? The issue can be reproduced here: https://stackblitz.com/edit/github-d34zwy?file=src%2FApp.tsx
Regards,
Todor

[wvudako]

I strongly suggest updating your Storybook with the Modals at the end if this isnt resolved soon