[Toast (v2.0.0-rc.5)]: setting `open` initially doesn't open the `Toast`

[Lukas742]

Bug Description

If 'open' is initially set on the Toast, it remains “closed”.

e.g.:

<ui5-toast open>Toast</ui5-toast>

This is problematic for implementations that rely on conditional rendering, which is, for example, common practice in React apps.

Another problem with this is that the Toast cannot be opened again without having to reset the open property to false (or having to remove the open attribute).

Affected Component

Toast

Expected Behaviour

When mounting the Toast with open applied, it should initially be open and only close after the time defined by duration has passed.

Isolated Example

https://stackblitz.com/edit/github-fdcakr?file=index.html,main.js

Steps to Reproduce

1. Go to StackBlitz
2. See that the Toast isn't visible even though open is set
3. Click on the "Set open to true" button --> nothing happens as open is already true
4. Click on the "Set open to false" button and then again on the "open" button --> the Toast is now visible

Log Output, Stack Trace or Screenshots

No response

Priority

None

UI5 Web Components Version

v2.0.0-rc.5

Browser

Chrome

Operating System

No response

Additional Context

No response

Organization

No response

Declaration

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

[ilhan007]

Hello colleagues, @SAP/ui5-webcomponents-topic-rl

one of the new APIs we have added for 2.0 seems to not work when initially set.

could you have a look?

[nikoletavnv]

Hello @Lukas742 ,

The problem arises from the styles you have in the html page:

If you remove them, you will see that the toast appears opened after page loads in the bottom-center of the page and the buttons for setting toast state to opened or closed also work.

Best regards, Nikoleta Terzieva

[Lukas742]

Hi @nikoletavnv

my bad, I used the template from your docs page and forgot to remove these styles. Unfortunately the issue is still reproducible when creating the Toast programmatically and setting open then. So, it seems like it's not an issue with initially setting the open property/attribute, but with creating a Toast via JS and adding open then.

I've adjusted my StackBlitz example accordingly and also added an example of the dialog as a comparison: https://stackblitz.com/edit/github-fdcakr-z3garp?file=index.html,main.js,package.json

1. Go to StackBlitz
2. Click the "Create Toast" button --> see that even while it's mounted in the body and open is set, it's not visible
3. Click on the "Set open to true" button --> nothing happens as open is already true
4. Click on the "Set open to false" button and then again on the "open" button --> the Toast is now visible
5. Comparison: Click on "Create Dialog" --> See that the dialog is visible

The same happens with rc.6

[nikoletavnv]

Hi @Lukas742,

I can confirm that in your StackBlitz example there is an issue when toast is created through JavaScript. I also noticed that there are some changes in the ui5-toast component that are not yet available in package "@ui5/webcomponents": "v2.0.0-rc.6". I have tested locally with the latest version of the web components from the main branch of the project, and I can not reproduce the issue. I tried to create a toast like in your example and it is visible. What I can suggest is to wait for the latest changes of the ui5-toast component to be ready for consumption in a package and retest and investigate the issue again. I will leave this issue open for now.

You can check a sample with the latest build of the web-components here

Best regards, Nikoleta

[Lukas742]

Hi @nikoletavnv

thanks for the feedback. I checked the sample and it's working great. Maybe this commit had something to do with it, at least that's the only commit that was added after rc.6 to the Toast 😄

I'll test it out in UI5WCR once a new rc is available and then let you know if it's working in the React context as well (normally it should work in the same way as with plain js, so I'm very optimistic about that).

[nikoletavnv]

Issue was fixed with this commit