Dialog: open event is not fired when conditionally rendered

[Lukas742]

Bug Description

When rendering a Dialog conditionally, the open event is not fired anymore. This seems to be a regression introduced after v2.7.4

Here you can find an example using the React wrapper. In case you need one without it, please let me know:

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

And here you can find the same implementation just with v2.7.4:

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

Affected Component

Dialog

Expected Behaviour

open should be fired if the ui5-dialog is initialized with open="true".

Isolated Example

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

Steps to Reproduce

1. Go to the StackBlitz example
2. Press the button to dynamically render and open the Dialog
3. See that open is not fired (no log in the console)

Log Output, Stack Trace or Screenshots

No response

Priority

None

UI5 Web Components Version

2.9.0

Browser

Chrome

Operating System

No response

Additional Context

No response

Organization

UI5WCR

Declaration

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

[plamenivanov91]

Hello @SAP/ui5-webcomponents-topic-rd ,

Could you please take a look at this regression?

Regards,
Plamen Ivanov

[TeodorTaushanov]

Hello @Lukas742,

Can you create an example, which do not use React. I'm trying reproducing the issue like:

function openDialog() {
	const dialog = document.createElement('ui5-dialog');
	dialog.setAttribute('header-text', 'Dialog Title');
	dialog.setAttribute('open', '');
	dialog.setAttribute('id', 'dialog');

	dialog.addEventListener("open", function () {
		console.error("Dialog opened");
	});

	document.body.appendChild(dialog);
}

and the open event triggers.

Best,
Teodor

[Lukas742]

Hi @TeodorTaushanov

it turns out that this only happens when using our wrapper. Sorry for not initially checking for that!

---

In our wrapper, we have to add a workaround for a hydration issue when attaching events:

 // In React 19 events aren't correctly attached after hydration
    const [attachEvents, setAttachEvents] = useState(!webComponentsSupported || !Object.keys(eventHandlers).length); // apply workaround only for React19 and if event props are defined

The attachEvents state is updated inside a useEffect that doesn't run on the server, which ensures that events are only registered on the client:

  useEffect(() => {
      setAttachEvents(true);
    }, []);

The events are added like this:

 <Component
        ref={componentRef}
        {...booleanProps}
        {...regularProps}
        {...(attachEvents ? eventHandlers : {})} // <-- these are all ui5wc custom event props of the respective component
        {...nonWebComponentRelatedProps}
        class={className}
        suppressHydrationWarning
      >
        {slots}
        {children}
      </Component>

When debugging I found that because of this, the open listener is registered after the open property has been applied. Furthermore I noticed, that our tests were flaky when testing this behavior in our FilterBar test where we mount a Dialog conditionally, so it seems that in some cases the timing was still right.

The solution I found is using useLayoutEffect instead of useEffect, as this way the event listener is registered before the browser paint and therefore early enough for the Dialog not to be opened already although the open React prop is already true.

---

I'm moving this issue to our repo, as this is not a ui5-webcomponents bug, but a regression in our wrapper.

[ui5-webcomponents-react-bot]

🎉 This issue has been resolved in version v2.9.1 🎉

The release is available on v2.9.1

Your semantic-release bot 📦🚀