Modals: flickering position

[tkeiner]

Describe the bug

On rendering of a Modal component (e.g. Toast or MessageBox) the position of the component is not fixed, which makes it look like the component flickers into the screen.

This behaviour does not always occur but is easily reproducible by opening a Modal multiple times and changing the width of the screen between render.

Isolated Example

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

Reproduction steps

1. Create Modal Component
2. Trigger Modal Component to open

Expected Behaviour

Ideally the Component should be rendered at the correct position without a change position being noticeable by a human.

Screenshots or Videos

No response

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

Thanks for reporting! I'll forward this issue to our UI5 Web Components Colleagues as the affected component is developed in their repository.

---

Hi Colleagues,

this issue is basically the same as described in this issue. So, please feel free to close this one as duplicate.
It seems that the issue affects all popup components extending the Popup class that are conditionally rendered.

Our Modals provider, conditionally renders the respective component with open="true" as default value, so developers can open popups without having to create a dedicated component for each popup. You can find out more about this in our Storybook.

In case you need a reproducible example without our Modals class, our wrapper or React, please let me know.

[ivoplashkov]

Hello @tkeiner,

Thank you for reaching out.

Indeed the issue is basically the same as the one mentioned in the above reply. It is reproducible with all popup components even without the Modals provider - https://stackblitz.com/edit/github-8upxfb-ndn9tp?file=index.html,main.js.

I am closing this issue as a duplicate, therefore please track the progress there.

Kind regards,
Ivaylo