Closed MarcusNotheis closed 1 month ago
Hi @MarcusNotheis ,
Can you please check this example link, because I currently can't isolate the issue with ui5-webcomponents only?
Can you check if there is something missed while isolating, and if not to confirm that it's only when used with web components for react?
Best Regards, Tsansilav
Hi @tsanislavgatev,
it only happens if you add an close
event listener to the dialog which is closing the dialog. I've made the example in react because there is is common to reset an open state for a dialog on the close event, in vanilla HTML/JS it feels a bit strange.
Anyhow, you can reproduce it by adding the following JS snippet to the playground:
dialog.addEventListener("close", () => {
dialog.open = false;
});
Thanks @MarcusNotheis , I am redirecting it to the team!
Hi team @SAP/ui5-webcomponents-topic-p ,
Can you please check this issue? I've isolated it in this example
Best Regards, Tsani
Hello @MarcusNotheis,
Thanks for your issue! We had this reported several times already and we are aware of this behavior. However, we aim to keep the components as close to the native behavior as possible. In this case, the select's public event close can be "caught" by a higher level component to perform a desired action, instead of closing the dialog, therefore we still want to keep this possible.
A solution to this on the app side would be to either check if the event target is the dialog and only then close it, or to prevent the event from bubbling up once fired by the select.
ref.current.addEventListener('close', (e) => {
if (e.target !== selectRef.current) {
setDialogOpen(false);
}
});
I hope this helps.
Best regards, Dobrin
Hi @dobrinyonkov,
I understand the rationale behind your answer, but I would see this as an unexpected behaviour, especially in the React ecosystem. Every time I would use a ui5-select
in any kind of popover or dialog, it would close my modal as long as I'm not prevent the bubbling in the close event handler. This is also somehow contradicting to what @vladitasev answered a couple of years back in this issue.
In addition, in v1 the after-open
and after-close
events were not bubbling (https://github.com/SAP/ui5-webcomponents/pull/1981), so this would also be worth to be mentioned as breaking change to in the migration guide in case you decide to stick to this behaviour.
Bug Description
When using a
ui5-select
in aui5-dialog
, the dialog closes when an option is selected.Affected Component
Dialog, Select
Expected Behaviour
DIalog should stay open
Isolated Example
https://stackblitz.com/edit/vitejs-vite-evkja6?file=package.json,src%2FApp.tsx,src%2Fmain.tsx&terminal=dev
Steps to Reproduce
Log Output, Stack Trace or Screenshots
No response
Priority
High
UI5 Web Components Version
2.0.1
Browser
Chrome, Edge, Firefox, Safari
Operating System
No response
Additional Context
The
close
event of the select seems to bubble and trigger theclose
event of the dialog?Organization
UI5 Web Components for React
Declaration