Modal Dialog and closable Notification

Guttorm · June 17, 2024, 2:32pm

[Edit: I confused “modal” and “non-modal”]

I have a modal Dialog where the user is to perform some action.
Since it is modal, the user can close it by clicking outside.

If something goes wrong while the Dialog is open, I display a closable Notification.
When the user clicks to close the Notification, the Dialog is also closed.

This is logical, since I did click “outside” the Dialog, but it is not what I want.
Any way to get around it?
I still want click outside the Dialog to close it though.

knoobie · June 17, 2024, 5:22pm

Theorie Not tested: if you add the notification inside the dialog (dialog.add(notification)) it might work…

Tatu2 · June 17, 2024, 5:51pm

Related: fix: prevent closing overlays when interacting with notifications by sissbruecker · Pull Request #3208 · vaadin/web-components · GitHub

Guttorm · June 18, 2024, 12:52pm

Tried it. Didn’t help

Guttorm · June 18, 2024, 12:56pm

That one is done and closed, so whatever it did didn’t help for my case.

I see that the new popover attribute and <dialog> are mainline now.
Maybe Vaadin should switch to those?

Tatu2 · June 19, 2024, 5:39am

I see that the new popover attribute and are mainline now.
Maybe Vaadin should switch to those?

It is an idea worth of thought, and it has been discussed every now and then. The problem is that it would be major breaking change. It would require to rewrite many components and maybe also to change some behaviors that are not compatible vaadin-overlay vs. dialog element.

github.com/vaadin/web-components

Make <vaadin-select> usable in native dialog element by allowing the overlay to attach to an element other than body

opened 06:17AM - 09 Aug 23 UTC

DevDuki

enhancement requires new major needs research vaadin-dialog vaadin-overlay

### Describe your motivation In my Lit application, I am using the native dialo…g element and wanted to add a select inside it. I used the `vaadin-select` component for it. Now when I open the select element, the dropdown list is shown at the correct position, however, since the overlay is attached to the body element it makes it not reachable and is rendered behind the dialog. I can imagine the same issue would appear in other similar components such as the `vaadin-combo-box`. I know there is a vaadin dialog component, which would solve this issue, but I would prefer to keep using the native dialog element. ### Describe the solution you'd like In the [source code](https://github.com/vaadin/web-components/blob/2acc34084bd03013a53b8cc07a50db524c879b83/packages/overlay/src/vaadin-overlay-mixin.js) the body element is hard coded as the parent element. Perhaps a property allowing the consumer of the component to define their own parent could help solve the problem. For example: `<vaadin-select overlay-parent="${this.dialog}">` or something like that. And then basically treating that element as the new parent element, instead of the body element. ### Describe alternatives you've considered I have tried the `mwc-select` from Material Web Components, which correctly renders the list inside the dialog. By changing the dialog's overflow property, it will also make the list look like it's "on top" of the dialog. ### Additional context I have prepared a sandbox where this behaviour can be seen and tested on [stackblitz](https://stackblitz.com/edit/vaadin-select-dialog?file=index.ts).