TextField MenuItem losing focus in MenuBar

Flow
1

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.setPlaceholder("txt-cycle-skip-placeholder");
        cycleTxt.setStep(1);
        cycleTxt.setMax(100);
        cycleTxt.setValue(1.0);
        cycleTxt.setWidth("100px");
        cycleTxt.addValueChangeListener(numberFieldDoubleComponentValueChangeEvent -> {
            cycle= (int) Math.max(1,numberFieldDoubleComponentValueChangeEvent.getValue());
            setupAssync();
        });
        bar.addItem(cycleTxt).setKeepOpen(true);

image

2

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
3

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:

4

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

5

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.