flow-components
flow-components copied to clipboard
Dialog closes immediately when open on field's value change
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
- Add the snipped above to a view
- Enter a value on the first field and click on the second field (or anywhere else)
- 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
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);");
It is not a supported use-case, but we will keep it open to see if there are more users affected by this.