search

SAP / ui5-webcomponents

UI5 Web Components - the enterprise-flavored sugar on top of native APIs! Build SAP Fiori user interfaces with the technology of your choice.
https://sap.github.io/ui5-webcomponents/
Apache License 2.0
1.56k stars 267 forks source link

Modals Toast: Component is rendered behind List #10158

Open tkeiner opened 6 days ago

tkeiner commented 6 days ago

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

image

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

Lukas742 commented 6 days ago

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 commented 5 days ago

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 commented 2 days ago

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