menu-bar: selecting a value of date-picker in a submenu closes also the submenu.

[johannest]

Description

If having a date-picker and other component inside a menu-bar's submenu, then selecting a value of the date-picker also closes the sub-menu since the 'items-outside-click' is dispatched from vaadin-contextmenu-items-mixin.js.

Expected outcome

Selecting a value of the date-picker, closes only the overlay of the date-picker, but not the sub menu. That would allow user to interact with other component inside the sub-menu.

Minimal reproducible example

Java/Flow example, but the issue should reproduce also with Hilla

MenuBar menuBar = new MenuBar();
menuBar.addThemeVariants(MenuBarVariant.LUMO_ICON);
MenuItem test = menuBar.addItem("Test");

SubMenu subMenu = test.getSubMenu();
subMenu.addItem(new FilterMenuContent());
add(menuBar);

where FilterMenuContent:

public class FilterMenuContent extends VerticalLayout {

    private final DatePicker fromDatePicker;
    private final DatePicker toDatePicker;

    public FilterMenuContent() {
        fromDatePicker = new DatePicker("Filter From");
        toDatePicker = new DatePicker("Filter To");
        add(new HorizontalLayout(fromDatePicker, toDatePicker));
    }
}

Workaround The issue can be worked around with the following steps:

• Use the following opened change listener for the DatePicker e.g. fromDatePicker.addOpenedChangeListener(e -> UI.getCurrent().getElement().setProperty("preventContextMenuClose", e.isOpened())); which toggles a preventContextMenuClose flag in the body element
• Check the flag in the node_modules/@vaadin/context-menu/src/vaadin-contextmenu-items-mixin.js ready()method:

ready() {
      super.ready();

      // Overlay's outside click listener doesn't work with modeless
      // overlays (submenus) so we need additional logic for it
      this.__itemsOutsideClickListener = (e) => {
        if (!e.composedPath().filter((el) => el.localName === 'vaadin-context-menu-overlay')[0]) {
          if (!document.body.preventContextMenuClose) {
            this.dispatchEvent(new CustomEvent('items-outside-click'));
          }
        }
      };
      this.addEventListener('items-outside-click', () => this.items && this.close());
    }

Steps to reproduce

Just open the menu and select a value for a datepicker, the menu closes automatically after datapicker's value is selected

Environment

Vaadin version(s): V23.x

Browsers

Issue is not browser related

[johannest]

Test project demonstrating the workaround datepicker-in-menu.zip

• Run mvn clean install once (mvn-resource-plugin should copy the vaadin-contextmenu-items-mixin.js into node_modules)
• Then run the application
• Now menu should stay open, even if selecting a value of a datepicker

[web-padawan]

Related issue: https://github.com/vaadin/web-components/issues/6986

[ugur-vaadin]

Tested and confirmed that this was fixed with the PR for a related issue.