Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add MenuBar.close() #5742

Closed
mvysny opened this issue Nov 21, 2023 · 1 comment · Fixed by #5745
Closed

Add MenuBar.close() #5742

mvysny opened this issue Nov 21, 2023 · 1 comment · Fixed by #5745
Labels
enhancement New feature or request vaadin-menu-bar

Comments

@mvysny
Copy link
Member

mvysny commented Nov 21, 2023

Describe your motivation

A PopupButton (a Button which shows a popup window with some rich layout on click) can easily be implemented via a MenuBar:

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

    public MainView() {
        final MenuBar menuBar = new MenuBar();
        final SubMenu fooSubMenu = menuBar.addItem("Foo").getSubMenu();
        final HorizontalLayout horizontalLayout = new HorizontalLayout(new Span("Popup button contents"));
        horizontalLayout.add(new Button("OK", e ->
                System.out.println("Clicked")));
        fooSubMenu.add(horizontalLayout);
        add(menuBar);
    }
}

The only problem is that, upon clicking on the "OK" button, the submenu stays open.

Describe the solution you'd like

It would be great to have a MenuBar.close() function which programmatically closes all open submenus. An implementation can be taken from vaadin/web-components#728 : we can simply call menuBar.getElement().executeJs("this._subMenu.close()"); from the server-side:

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

    public MainView() {
        final MenuBar menuBar = new MenuBar();
        final SubMenu fooSubMenu = menuBar.addItem("Foo").getSubMenu();
        final HorizontalLayout horizontalLayout = new HorizontalLayout(new Span("Popup button contents"));
        horizontalLayout.add(new Button("OK", e -> {
            System.out.println("Clicked");
            close(menuBar);
        }));
        fooSubMenu.add(horizontalLayout);
        add(menuBar);
    }

    private static void close(MenuBar menuBar) {
        menuBar.getElement().executeJs("this._subMenu.close()");
    }
}

Describe alternatives you've considered

No response

Additional context

No response

@web-padawan web-padawan added enhancement New feature or request vaadin-menu-bar labels Nov 21, 2023
mvysny added a commit that referenced this issue Nov 21, 2023
@mvysny
Copy link
Member Author

mvysny commented Nov 21, 2023

Acceptance criteria: after menuBar.close() is called, none of its submenus are left open.

@mvysny mvysny mentioned this issue Nov 21, 2023
10 tasks
sissbruecker added a commit that referenced this issue Jan 24, 2024
* feat: add MenuBar.close(). Fixes #5742

* chore: add TestBench IT tests for menu close()

* chore: remove unused import

* chore: call existing clickElementWithJs() instead of click()

* use public API, update tests

---------

Co-authored-by: Sascha Ißbrücker <sissbruecker@vaadin.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request vaadin-menu-bar
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants