DatePicker selection close its parent ContextMenu

[guygoldwasser]

B"H
While push DatePicker inside ContextMenu, when picker is use, both picker and ContextMenu are closed, Looks like closing event is leak to the layer next after

Button popupButton = Button("pop");
VerticalLayout layout = new VerticalLayout();
layout.add(new DatePicker("date picker"));
ContextMenu popup = new ContextMenu(popupButton);
popup.add(layout);
popup.setOpenOnClick(true);

[guygoldwasser]

B"H
Thanks Tom,
currently this is a blocker to me. Do we have some idea when this will be ready?
Do you have any idea how can I make some workaround?
Thanks

[tomivirkki]

Hi @guygoldwasser

Unfortunately, I couldn't find a cleaner workaround for this:

// Register a listener that prevents all context-menus from closing when the UI has "preventContextMenuClose" property set true (only need to run this once)
UI.getCurrent().getElement().executeJs("this.addEventListener('items-outside-click', function(e){ this.preventContextMenuClose && e.stopPropagation()}, true)");

datePicker.addOpenedChangeListener(e -> {
  // Toggle the property that prevents the context-menu from closing
  UI.getCurrent().getElement().setProperty("preventContextMenuClose", e.isOpened());
});

[guygoldwasser]

Thanks a lot Tomi! will try that

[mletenay]

The problem is still present as of Vaadin 20.0.5, see example below.

@Route("contextMenu")
public class ContextMenuView extends VerticalLayout {

	public ContextMenuView() {
		super();
		setMargin(true);
		Span clickMe = new Span("Click here");
		add(clickMe);
		
		ContextMenu menu = new ContextMenu();
		menu.setTarget(clickMe);
		menu.setOpenOnClick(true);	
		menu.add(new ComboBox<String>("Combobox", "One", "Two"));
		menu.addItem("-");
		menu.add(new DatePicker("DatePicker"));
		add(menu);
	}
	
}

Interesting observation is that Combobox, which also has its own overlay, works fine and keeps the menu open upon selection.
Only the DatePicker does not work properly and closes the context menu.

[guygoldwasser]

The problem is still present as of Vaadin 20.0.5, see example below.

@Route("contextMenu")
public class ContextMenuView extends VerticalLayout {

	public ContextMenuView() {
		super();
		setMargin(true);
		Span clickMe = new Span("Click here");
		add(clickMe);
		
		ContextMenu menu = new ContextMenu();
		menu.setTarget(clickMe);
		menu.setOpenOnClick(true);	
		menu.add(new ComboBox<String>("Combobox", "One", "Two"));
		menu.addItem("-");
		menu.add(new DatePicker("DatePicker"));
		add(menu);
	}
	
}

Interesting observation is that Combobox, which also has its own overlay, works fine and keeps the menu open upon selection.
Only the DatePicker does not work properly and closes the context menu.

B"H
similar happens also like that: vaadin/vaadin-grid#1827 (comment)
closed due to similarity of this problem.
but seems that there are more cases which not connected to date field, e.g. grid inside context menu

[web-padawan]

Related issue: #4491

[davidef]

We are having the same issue we improved the workaround so it needs to be execute just once and if executed multiple times doesn't leak any listener. It also work with DateTimePicker which doesn't have addOpenedChangeListener

		UI.getCurrent().getElement().executeJs("""
			if (window.preventContextMenuClose === undefined){
				window.preventContextMenuClose = false;
				this.addEventListener('items-outside-click', function(e){
					if (window.preventContextMenuClose){
						e.stopPropagation();
					}
				}, true);
				this.addEventListener('opened-changed', function(e){
					if (e.target.tagName == 'VAADIN-DATE-PICKER-OVERLAY') {
						requestAnimationFrame(function(){
							window.preventContextMenuClose = e.target.getAttribute('opened') == '';
						});
					}
				}, true);
			}
			""");

[guygoldwasser]

Issue still there on Vaadin24.
also same problem exist with any other web component that sensitive to click outside being close in case datepicker in there inside.

[roelnoten]

Issue also exists when using a date(time)picker in a popup (https://vaadin.com/directory/component/popup). We're on vaadin 23.3.16.

Any timeline for fixing this very annoying issue? @web-padawan

When using it in such popup adding this workaround on Data(Time)Picker construction works for us:

getElement().executeJs(
                "	this.addEventListener('opened-changed', function(e){ " +
                        "		if (e.target.tagName == 'VAADIN-DATE-PICKER' || e.target.tagName == 'VAADIN-DATE-TIME-PICKER-DATE-PICKER') { " +
                        "           var overlay = document.getElementsByTagName('vaadin-date-picker-overlay')[0];" +
                        "        	overlay.addEventListener('click', function(e) { " +
                        "	        	e.stopPropagation();" +
                        "            }, false);" +
                        "		} " +
                        "	}, true);"
                , getElement());

[TatuLund]

Better way to reproduce:

@Route(value = "popup", layout = MainLayout.class)
public class PopupView extends Div {

    public PopupView() {
        Button button = new Button("Open");
        button.setId("openbutton");
        Popup popup = new Popup();
        popup.setFor("openbutton");
        popup.setCloseOnClick(false);
        DatePicker picker = new DatePicker();
        ComboBox<String> combo = new ComboBox<>();
        combo.setItems("One", "Two", "Three");
        popup.add(picker, combo);
        add(button, popup);
    }
}

Compare the behavior of ComboBox and DataPicker. Selecting ComboBox value does not close the Popup, selecting the Date on the other hand closes it.

Popup is from https://vaadin.com/directory/component/popup

[TatuLund]

I think this is related to vaadin/flow-components#1156

ComboBox has this prevented, but DatePicker not https://github.com/vaadin/web-components/blob/main/packages/combo-box/src/vaadin-combo-box-mixin.js#L427

[web-padawan]

Related to the above: unlike ComboBox which keeps focus in the input, DatePicker moves focus to the overlay content and corresponding elements inside it (month calendar dates and buttons) for proper accessibility support.

[TatuLund]

@web-padawan I do not quite follow your point. Both DatePicker and ComboBox work in similar fashion when opening the drop down. E.g. if I use keyboard cursor down, the focus jumps to overlay, and I can select item / date with keyboard. Interestingly when I am doing this fully on keyboard, the closing of DatePicker overlay does not lead to closing of the Popup, unlike when picking the date with the mouse. Are you specifically now referring to fact that when I open DatePicker dropdown by pressing cursor down, the DatePicker emits blur event in the process, ComboBox does not?

[web-padawan]

E.g. if I use keyboard cursor down, the focus jumps to overlay, and I can select item / date with keyboard.

In case of ComboBox, focus stays in the <input> when opening the dropdown. This actually related to mousedown event prevention that cancels the following click event, so it also prevents closing the parent ContextMenu as a result.

[ugur-vaadin]

This issue was fixed and will be available with the next release.

[wtomee]

This issue appears to be a problem with Select component as well.

The expected behaviour would be to not close the Popup component, when an item is clicked inside Select component item list.

Example code

@Route(value = "popup", layout = MainLayout.class)
public class PopupView extends Div {

    public PopupView() {
        Button button = new Button("Open");
        button.setId("openbutton");
        Popup popup = new Popup();
        popup.setFor("openbutton");
        popup.setCloseOnClick(false);
        DatePicker picker = new DatePicker();
        ComboBox<String> combo = new ComboBox<>();
        combo.setItems("One", "Two", "Three");
        Select<String> select = new Select();
        select.setItems("One", "Two", "Three");
        popup.add(picker, combo, select);
        add(button, popup);
    }
}

I'm using Vaadin 24.4.0.alpha16 version.

[web-padawan]

@wtomee Please create a new issue for this so we could discuss it and then potentially take into backlog.