TextField MenuItem losing focus in MenuBar

I have a MenuBar to filer a grid, the menubar has a NumberField, however seems the field loses focus when I click on it to insert the value. I even tried keep Open.

 NumberField cycleTxt=new NumberField(getT("txt-grid-skip"));
        cycleTxt.addValueChangeListener(numberFieldDoubleComponentValueChangeEvent -> {
            cycle= (int) Math.max(1,numberFieldDoubleComponentValueChangeEvent.getValue());


I can confirm this using the web component. The reason is the fact that clicking a field causes item-selected event (which probably should be prevented in this case). Using keepOpen doesn’t help because in that case, the overlay content is re-rendered.

You can create an issue in the web components repository and we will discuss it. However, please note that in general, using fields in the MenuBar items isn’t considered a supported use case (same applies to e.g. placing fields in ListBox and Tabs).

1 Like

I assume it would be a requested feature, like clicking on a “Search Icon” and a TextField menuItem shows up as a popup.

Here is the feature request:

Story / Epic /Acceptance Criteria (you name it) defined by Rolf regarding this: Dialog anchor positioning (draft) · Issue #5215 · vaadin/platform · GitHub

In the meantime: Use a Dialog

You really shouldn’t put text fields inside a menu item. That wouldn’t be proper HTML.

If you want to show a search field upon clicking a search button, you should use dialog.