Dialog closes immediately if opened on focus

[tulioag]

Given a CustomField that contains a TextArea. If you open a Dialog inside a focus listener, the dialog close as soon as it is opened some of the time (but not always).

import com.vaadin.flow.component.customfield.CustomField;
import com.vaadin.flow.component.dialog.Dialog;
import com.vaadin.flow.component.html.Div;
import com.vaadin.flow.component.textfield.TextArea;
import com.vaadin.flow.router.Route;

@Route("")
public class MainView extends Div {

	public MainView() {

		Dialog dialog = new Dialog();
		TextArea textArea = new TextArea();
		CustomField<String> customField = new CustomField<String>() {
			{
				add(textArea);
			}
			@Override
			protected String generateModelValue() {
				return textArea.getValue();
			}

			@Override
			protected void setPresentationValue(String newPresentationValue) {
			}
		};
		add(customField);
		dialog.add("My dialog");
                textArea.addFocusListener(e -> dialog.open());
	}


}

I was able to reproduce both in Firefox 85 and Chromium 87.0.4280.66 on Ubuntu Linux.

Based on this forum question https://vaadin.com/forum/thread/18524778/vaadin-customfield-focus-mozilla-problem

[Adityachaturvedi2906]

Hi, can I contribute to this issue? Please guide me further.

[ghost]

When you set dialog to:

dialog.setCloseOnOutsideClick(false);

Dialog open like it should, but you cannot close dialog with ESC.

When we press the mouse longer on TextArea, the dialog is open, but when we release it, the dialog disappears.

[tulioag]

Hi, can I contribute to this issue? Please guide me further.

Hi @Adityachaturvedi2906 . If you have any other information on this issue, you are welcome to post it here.

[yuriy-fix]

The use-case described in the issue is not a common usage of field component and dialog.
Reason why it's happening the described way is because focus listener is triggered within next roundtrip to server.
If field is clicked quickly enough click event won't trigger closing of the dialog (as it comes within the same roundtrip and focus didn't open the dialog yet).
If there is a delay between pressing the mouse key and releasing it, focus event will open the dialog and click (that occurs on releasing the mouse key) will close the dialog afterwards.
Cannot reproduce the issue mentioned by @goransol. I was still able to close the dialog by pressing Esc.
I would recommend to add a separate button to the UI in order to open dialog if your intention is to modify the value of the custom-field inside that one. If extra details need to be provided inside the dialog without changing the value, vaadin-notification could help in that case.

[ghost]

This only on Mozzila Browser.

With code belove problem is resolved.

       dialog.setCloseOnOutsideClick(false);
       dialog.addOpenedChangeListener(e->{

            if(e.isOpened()){
                try {
                    Thread.sleep(100);
                    dialog.setCloseOnOutsideClick(true);

                } catch (InterruptedException interruptedException) {
                    interruptedException.printStackTrace();
                }
            }
            else{
                dialog.setCloseOnOutsideClick(false);
            }

        });

[rahul-raj]

The issue still there in version 23.2.0
I was trying to open a dialog window while an anchor link is clicked. There's no click listener so I had to go with focus listener as an alternative, and at this point it is bit of annoying as there's no other way to get around unless I use a Button.

P.S: I can't use button since it has to be a link on the header and it should open a Dialog when it is clicked.