[virtualizer] The virtualizer does not check for scrollable elements inside the Shadow DOM

[stefanuebe]

Description

Grid pro seems to catch mouse wheel scroll events, which leads to strange behavior, when using a text area as a custom field in an edit column. As soon as the text area has a scroll bar, it is not possible to mouse wheel scroll either the text area or the grid pro.

The MW scrolling of the text area is simply ignored and delegated to / catched by the grid pro. The MW scrolling of the grid pro breaks (see video ). Using the scrollbar works fine for both components.

Expected outcome

Beside of not broken mouse wheel scrolling, doing it on the text area should scroll the text area, scrolling the grid it self, should scroll the grid.

Live Demo (optional)

https://user-images.githubusercontent.com/36725474/133581259-10c762a8-c441-4dcf-84c4-6b86d7a6f010.mp4

Minimal reproducible example

@Route(value = "grid-pro-text-area-issue", layout = MainLayout.class)
public class GridProTextAreaIssuesView extends Div {
    public GridProTextAreaIssuesView() {
        List<SamplePerson> persons = new ArrayList<>();

        for (int i = 0; i < 100; i++) {
            persons.add(new SamplePerson("Person " + i + "\n\n\n\n\n\n\n\n\nwith benefits"));
        }

        GridPro<SamplePerson> grid = new GridPro<>();
        grid.setEditOnClick(true);
        grid.setItems(persons);

        TextArea component = new TextArea();
        component.setMaxHeight("50px");
        grid.addEditColumn(SamplePerson::getName)
                .custom(component, SamplePerson::setName)
                .setHeader("Name (TA)");

        add(grid);
    }
    public static class SamplePerson {
        private String name;

        public SamplePerson(String name) {
            this.name = name;
        }

        public String getName() {
            return name;
        }

        public void setName(String name) {
            this.name = name;
        }
    }
}

Steps to reproduce

Open the page. Click into a cell to activate editing (text area with scroll bars should appear). Scroll using the mouse wheel somewhere inside the grid pro or text area.

Environment

Vaadin 21 with default component dependencies. Windows 10 Chrome 93

[vursen]

Confirmed that the issue is reproducible in the latest Vaadin 22.0.0.alpha8.

Note, the issue becomes not reproducible if I enable grid.setAllRowsVisible(true), which means that the problem is actually related to the virtualizer and perhaps the way it handles the wheel event.

[vursen]

After a discussion with @tomivirkki, the issue appears to be in the virtualizer.

The text-area's scrollable element is the input-field part which lays in the Shadow DOM and not the <textarea> element in the light DOM as you might expect. The key thing is that the virtualizer currently doesn't check for scrollable elements in the Shadow DOM, therefore the input-field part ends up not scrollable.