Grid completely ignores tabIndex in editor fields / Reordering columns does not update focus order for editor fields

[hoshie82]

Description of the bug

If you're setting the tabIndex for a field in a grid manually, it is completely ignored.

If you're reordering columns and focussing the fields again, the order for moving through the cells with tab is not updated. Only if the grid is detached and attached again, the order after reordering works

Expected behavior

The tabIndex was just a attempt for a workaround.. Reordering is more important for me...

If you reorder the columns, the focus order with tab should be updated, so focussing the first column, pressing tab should focus the second column.

Minimal reproducible example

• click on the row and focus column "s3" and press tab
• column s4 is focussed
• move column s3 to first position
• focus s3 again and press tab
• column s4 is focussed again

expected:

• after reordering column s1 (right to s3) should be focussed.

  private Component buildTestGrid() {
        Grid<DataObject> grid = new Grid<>();
        Editor<DataObject> editor = grid.getEditor();
        editor.setBinder(new Binder<>());
        editor.setBuffered(false);
        grid.addItemClickListener(e -> {
            if (!editor.isOpen()) {
                editor.editItem(e.getItem());
            }
        });
        grid.setColumnReorderingAllowed(true);
        new ColumnTabIndex("s1", DataObject::getS1, DataObject::setS1, 5).addToGrid(grid);
        new ColumnTabIndex("s2", DataObject::getS2, DataObject::setS2, 4).addToGrid(grid);
        new ColumnTabIndex("s3", DataObject::getS3, DataObject::setS3, 3).addToGrid(grid);
        new ColumnTabIndex("s4", DataObject::getS4, DataObject::setS4, 2).addToGrid(grid);
        new ColumnTabIndex("s5", DataObject::getS5, DataObject::setS5, 1).addToGrid(grid);

        grid.setItems(new DataObject("1", "2", "3", "4", "5"));
        return grid;
    }

    @Data
    @RequiredArgsConstructor
    private static class ColumnTabIndex {
        private final String key;
        private final ValueProvider<DataObject, String> getter;
        private final Setter<DataObject, String> setter;
        private final int tabIndex;

        void addToGrid(Grid<DataObject> grid) {
            TextField tf = new TextField();
            tf.setTabIndex(tabIndex);
            Binder<DataObject> b = grid.getEditor().getBinder();
            b.forField(tf).bind(getter, setter);
            grid.addColumn(getter).setKey(key).setHeader(key).setEditorComponent(tf);
        }
    }

    @Data
    @AllArgsConstructor
    private static class DataObject {
        private String s1;
        private String s2;
        private String s3;
        private String s4;
        private String s5;
    }

Versions

• Vaadin / Flow version: 24.3.11
• Java version: 21
• OS version: windows 11
• Browser: chrome/firefox

[TatuLund]

I think this is same as this one: https://github.com/vaadin/web-components/issues/3275

[hoshie82]

@TatuLund looks similar for the tabindex-issue.. but this does not fix the problem with the reordering?!

This is caused by the cell handling within the row i think!? Solving 3275 would only provide a workaround?!