flow-components

flow-components copied to clipboard

Description

The workflow that I need to implement can have a user tabbing through a set of fields before a grid, and ultimately wind up in a textfield in the grid. After they are in the grid, they will be working only in the grid. Tabbing through the fields outside of the grid works, and tabbing through the fields inside of the grid works. Tabbing from outside of the grid to inside the grid works when running when compiled for DEV, but when the code is compiled for production it does not work (running in DEV or otherwise)

Expected outcome

I would expect tabbing from outside the Grid to inside the Grid to work in production the same way it works in dev.

Minimal reproducible example

@SpringComponent
@Scope("prototype")
@Route(value="test", layout = MainLayout.class)
public class TestView extends VerticalLayout {
    private final TextField textField = new TextField();
    private final Binder<TestData> binder = new Binder<>(TestData.class);
    private final TextField gridEditTextField1 = new TextField();
    private final TextField gridEditTextField2 = new TextField();
    private final List<TestData> gridData = List.of(new TestData());
    private final Grid<TestData> grid = new Grid<>();

    @PostConstruct
    private void postConstruct() {
        setSizeFull();
        textField.setWidthFull();
        grid.setSizeFull();
        final Editor<TestData> editor = grid.getEditor();
        editor.setBinder(binder);
        editor.setBuffered(false);
        grid.setItems(gridData);
        grid.addColumn(TestData::getField1).setHeader("Field 1").setEditorComponent(gridEditTextField1);
        grid.addColumn(TestData::getField2).setHeader("Field 2").setEditorComponent(gridEditTextField2);
        add(textField, grid);
        gridData.stream().findFirst().ifPresent(editor::editItem);
        textField.focus();
    }


    @Data
    private static class TestData {
        private String field1;
        private String field2;
    }
}

Steps to reproduce

1. Implement the snippet above and compile for DEV
2. Tab from the focused TextField
3. See that you end up in the first TextField in the Grid
4. Recompile for PROD
5. Tab from the focused TextField
6. See that you do not end up in the first TextField in the Grid. In fact, you cannot tab into the Grid at all.

Environment

Vaadin version(s): OS: Ubuntu Linux 20.04.6, 22.04.6

Browsers

Chrome

Thanks for the issue. Tried to reproduce it using the Flow Spring starter and latest Vaadin 24 and here is what I get:

https://github.com/vaadin/flow-components/assets/10589913/c0989538-d390-4946-89ac-895e841da36b

Could you please specify Vaadin version you use? This might help investigating further.

I am having the issue in Vaadin 24.3.6. I upgraded from 24.3.3 while chatting with support.

Is your example running DEV code? The tabbing works for me in DEV, but does not when I compile to -Pproduction.

Thanks,

Tim J. Adams

Software Developer

Alberta Utility Billing Inc.

Telephone: 403-805-0828

Email: @.@.>

https://albertautilitybilling.ca/

---

From: Serhii Kulykov @.> Sent: Wednesday, March 13, 2024 2:55 AM To: vaadin/flow-components @.> Cc: Tim Adams @.>; Author @.> Subject: Re: [vaadin/flow-components] Tabbing from a TextField outside of a Grid to a TextField inside the Grid works when compiled for DEV but not when compiled for PROD (Issue #6118)

Thanks for the issue. Tried to reproduce it using the Flow Spring starterhttps://github.com/vaadin/skeleton-starter-flow-spring and latest Vaadin 24 and here is what I get:

https://github.com/vaadin/flow-components/assets/10589913/c0989538-d390-4946-89ac-895e841da36b

Could you please specify Vaadin version you use? This might help investigating further.

— Reply to this email directly, view it on GitHubhttps://github.com/vaadin/flow-components/issues/6118#issuecomment-1993852615, or unsubscribehttps://github.com/notifications/unsubscribe-auth/AY5O3OX2KO56XHBU6XPNMODYYAH7DAVCNFSM6AAAAABESHV4YWVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTSOJTHA2TENRRGU. You are receiving this because you authored the thread.Message ID: @.***>

@timjadamsalbertautilitybilling Here's the test project that I used: https://github.com/web-padawan/grid-editor-test

I copied your code and placed it in MainView.java - the only difference is that I'm not using Spring annotations. I tried to run the project using mvn spring-boot:run -Pproduction and it works the save as in the dev mode.

Closed as not reproducible. Feel free to open a new issue if the problem persists.