vaadin / flow-components

Java counterpart of Vaadin Web Components
99 stars 66 forks source link

Dialog closes immediately when open on field's value change #5943

Open paodb opened 7 months ago

paodb commented 7 months ago

Description

I have a form with two textfields in it . On the first field's value change listener, a dialog gets open. This dialog is set to close on outside click. If I do a value change in the first field and switch to the second by clicking TAB then the dialog remains open. If I use the mouse it immediately closes the dialog.

Expected outcome

Dialog should stay open.

Minimal reproducible example

var text1 = new TextField("Perform a value Change here");
text1.setWidth("200px");
text1.addValueChangeListener(event -> {
    var dialog = new Dialog("I'm a dialog"); 
        dialog.setWidth("600px");
        dialog.setHeight("200px");
        dialog.setCloseOnOutsideClick(true);
        dialog.open();
});

var text2 = new TextField("Click here after value change");
text2.setWidth("200px");

var textLayout = new HorizontalLayout(text1, text2);

Steps to reproduce

  1. Add the snipped above to a view
  2. Enter a value on the first field and click on the second field (or anywhere else)
  3. See the dialog opens and gets close immediately

Repeat step 2 but instead of using mouse click, use tab key and see how the dialog gets open and stays open.

Environment

Vaadin version(s): 24.3.2

Browsers

Chrome, Firefox

paodb commented 7 months ago

Workaround:

 dialog.getElement().executeJs(""
    + "this.__noCloseOnOutsideClick = this.noCloseOnOutsideClick;"
    + "this.__readyForClosing = false;"
    + "this._handleOutsideClick = e => {"
    + "  if(this.__readyForClosing) { "
    + "    this.noCloseOnOutsideClick = this.__noCloseOnOutsideClick; "
    + "  } else { "
    + "    this.noCloseOnOutsideClick = true;"
    + "  }"
    + "}; "
    + "let vaadinOverlay = this.$.overlay;"
    + "vaadinOverlay.addEventListener('vaadin-overlay-outside-click', this._handleOutsideClick, {capture: true}); "
    + " "
    + "let backdrop = vaadinOverlay.$.backdrop;"
    + "backdrop.addEventListener('mousedown', e => this.__readyForClosing = true);");
yuriy-fix commented 7 months ago

It is not a supported use-case, but we will keep it open to see if there are more users affected by this.