[dialog] Modeless dialog does not honor close on outside click

[knoobie]

Description

Using modeless (setModal(false) does not honor closeOnOutsideClick and stays open.

Expected outcome

Dialog closes when clicking outside.

Minimal reproducible example

        var dialog = new Dialog();
        dialog.setModal(false);
        dialog.setCloseOnOutsideClick(true);
        dialog.add(new Paragraph("Lorem Ipsum"));
        dialog.open();

Environment

Vaadin version(s): 24.4.10

Browsers

All

[web-padawan]

This is kind of by design as the "modeless" overlay doesn't use global outside click / Esc key listeners:

web-components/packages/overlay/src/vaadin-overlay-mixin.js

Lines 244 to 252 in d665940

	if (!modeless) {
	if (this.opened) {
	this._addGlobalListeners();
	this._enterModalState();
	}
	} else {
	this._removeGlobalListeners();
	this._exitModalState();
	}

We did have to add some workarounds for it especially custom outside click listener for vaadin-context-menu.

[knoobie]

If this is not a bug.. it probably has to be documented on the flow side on either modal or closeOnOutsideClick - I was kinda suprised by this :) We use setModal(false) often because of the "problems" with server-side modality; which renders the closeOnOutsideClick flag "useless".

[TatuLund]

Note, you can have modal dialog and disable the server side modality using API in UI class.

[sissbruecker]

Something is wrong if people start using non-modal dialogs to work around server-side modality. Maybe there should be a more obvious API on the component level to disable it.

Right now disabling it is not straightforward:

• It requires you to add the dialog to the UI manually, otherwise the auto-add functionality will make the dialog a server-side modal in a before client response hook
• You must disable the server-side modality each time after opening the dialog

For comparison, this works:

add(dialog);
dialog.open();
ui.setChildComponentModal(dialog, false);

And these don't:

dialog.open();
ui.setChildComponentModal(dialog, false);

add(dialog);
ui.setChildComponentModal(dialog, false);
dialog.open();