flow-components icon indicating copy to clipboard operation
flow-components copied to clipboard

Dialog closes immediately when open on field's value change

Open paodb opened this issue 1 year ago • 2 comments
trafficstars

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 avatar Jan 12 '24 16:01 paodb

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);");

paodb avatar Jan 12 '24 16:01 paodb

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

yuriy-fix avatar Jan 29 '24 09:01 yuriy-fix