CODEWITHSUNDEEP
vaadinmenubarvaadin-flowvaadin14
jeje
jeje

Reputation: 121

vaadin 14 : How to add and give capabilities to fill a form in a menu bar component

I use the menuBar component in my application and I would like to add a "mini" form in the menu. In the "contact" menu, the user can fill a TextField with a phone number and click on a submit button to be called. My issue is when I select the TextField, the menu closes automatically. Do you know if it's possible to do that and how I can do ? Thank you.

This an example of my menu

public class HeaderView extends MenuBar implements RouterLayout {
    private final MenuItem tools;
    private final MenuItem contacts;

    public HeaderView() {
        // logo
        final Image img = new Image("img/logo.png", "image");
        img.setHeight("44px");
        this.addItem(img);

        // TOOLS
        tools = this.addItem("Tools");
        tools.addComponentAsFirst(new Icon(VaadinIcon.TOOLS));

        // CONTACTS
        contacts = this.addItem("Contacts");
        contacts.addComponentAsFirst(new Icon(VaadinIcon.PHONE));

        // layout for the form contact
        final FormLayout nameLayout = new FormLayout();

        final TextField phoneField = new TextField();
        phoneField.setLabel("Phone");
        phoneField.setPlaceholder("Phone");
        final Button sendButton = new Button("send");

        // add textfield and button to the layout
        nameLayout.add(phoneField, sendButton);
        // add the form to the menubar
        contacts.getSubMenu().addItem(nameLayout);
    }

Upvotes: 0

Views: 195

Answers (1)

Jeroen
Jeroen

Reputation: 169

You can try changing contacts.getSubMenu().addItem(nameLayout) to contacts.getSubMenu().add(nameLayout) I'm not sure if you can self trigger closure of the submenu after submission. If that is required.

Upvotes: 1

Related Questions