vaadin / web-components

A set of high-quality standards based web components for enterprise web applications. Part of Vaadin 20+
https://vaadin.com/docs/latest/components
470 stars 83 forks source link

ConfirmDialog setCloseOnOutsideClick #8126

Open sveinnetnordic opened 1 week ago

sveinnetnordic commented 1 week ago

Describe your motivation

Started to replace my old component MyConfirmDialog, which extends Dialog, with the nice ConfirmDialog. Could not find setCloseOnOutsideClick, which I use for Info/Warning.

Describe the solution you'd like

Add

public void setCloseOnOutsideClick(boolean closeOnOutsideClick) {
        getElement().setProperty("noCloseOnOutsideClick", !closeOnOutsideClick);
    }

Describe alternatives you've considered

Currently using this hack:

ConfirmDialog().also {
            it.open()
            it.element.executeJs("overlay.shadowRoot.getElementById('backdrop').onclick = ()=>this.opened=false")
        }

Additional context

No response

rolfsmeds commented 5 days ago

The ConfirmDialog is not really designed to be used for anything that can just be dismissed like that without making an explicit choice – it's intended for use cases where the user actually needs to confirm or cancel an operation. I would recommend using the normal Dialog for this instead.

sveinnetnordic commented 5 days ago

I agree!

I would be nice to have the possibility to have a protected void setCloseOnOutsideClick(boolean closeOnOutsideClick) in ConfirmDialog

public class InfoDialog extends ConfirmDialog {
    @Override
    public void setCloseOnOutsideClick(boolean closeOnOutsideClick) {
        super.setCloseOnOutsideClick(closeOnOutsideClick);
    }
}

Then I could delete my MyConfirmDialog extends Dialog, because ConfirmDialog has everything I need.

I could also use the ugly executeJs above in InfoDialog.setCloseOnOutsideClick, but not so nice. It is maybe a more pretty way to close the dialog on outside click?

rolfsmeds commented 4 days ago

Is there a particular reason why you want to use ConfirmDialog instead of Dialog for use cases that are not about actually confirming something?

sveinnetnordic commented 4 days ago

This is a light weight message. User forgot that parent course should be set first. Just clicking outside is enough. Was thinking to use Notification, but think ConfirmDialog is best. The MyConfirmDialog has setCloseOnOutsideClick, just trying to do the same. Not a big deal! If overlay.shadowRoot.getElementById... stops working user need to click Confirm... image