Tab behavior changes after upgrading to vaadin24 from 14

Flow
1

I used to be able to press Tab once to move to the next column, but now I have to press Tab twice for Select field. TextField does not have this problem.
if I select an item from a select field, then:

  • The first Tab just focuses the same field again (blue border)
    • for example, I select 198 from the list and hit TAB
      image
      *Pressing TAB the second time will then move to the next column

When I navigate to the next column using Tab, everything works as expected if I don’t make a selection — a single Tab moves me to the next column

The table works as follows: the user must first click on a row to select it (which highlights the row), and then click on a specific cell to start editing that field.

Here’s my defineEditor method:

grid.addItemClickListener(e -> {
    Entity item = e.getItem();

    if (!item.isEditable() || item.isDeleted()) {
        return;
    }

    if (grid.getEditor().isOpen() && !grid.getEditor().save()) {
        return;
    }

    grid.getEditor().editItem(item);

    // Try to focus the editor field for the clicked column
    if ("columnA".equals(e.getColumn().getKey())) {
        columnASelect.focus();
    } else if ("columnB".equals(e.getColumn().getKey())) {
        columnBSelect.focus();
    } else if ("columnC".equals(e.getColumn().getKey())) {
        columnCSelect.focus();
    }
});

Here’s my createSelect method:

private Select<String> createTableEditorSelect(
        Column<Entity> column,
        List<String> options,
        String defaultValue,
        boolean includeEmptyOption,
        boolean includeAllOption) {

    Select<String> select = new Select<>();
    select.setItems(options);
    select.setSizeFull();

    defaultValue = defaultValue == null ? "" : defaultValue;
    select.setValue(defaultValue);

    // Value change listener (fires before blur)
    select.addValueChangeListener(e -> {
        if (selectedEntity != null
                && gridEditor != null
                && gridEditor.getItem() != null
                && gridEditor.getItem().equals(selectedEntity)) {

            if (selectedEntity.getId() != null) {
                markFieldEdited(selectedEntity, column.getKey(), e, false);
                markEntityEdited(selectedEntity);
                updateColumnEditorStyle(selectedEntity, column);
            }

            // Save editor value immediately to avoid losing changes
            grid.getEditor().save();

            if (!grid.getEditor().isOpen()) {
                grid.getEditor().editItem(selectedEntity);
            }

            updateRowEditorStyle(selectedEntity);
        }
    });

    column.setEditorComponent(select);
    return select;
}

Does anyone know what could cause the field to refocus on itself after pressing Tab once?

This didn’t happen in Vaadin 14, so I’m wondering if something changed in newer versions or if there’s something in my setup triggering this behavior.

2

I’m not sure what has changed since V14 (there’s been quite a few years between that and V24, after all) but my guess is that the problem is that you’re saving and re-opening the editor on valuechange, without re-focusing the Select in the editor, so focus doesn’t automatically return to the Select, so the first focus just re-focuses the Select, which had already lost focus. (This is just my guess here, though.)

1 Like