search

vaadin / flow-components

Java counterpart of Vaadin Web Components
102 stars 65 forks source link

Scrolling child Grid in nested Grid (using ItemDetailsRenderer) not working properly #1866

Open mrgreywater opened 3 years ago

mrgreywater commented 3 years ago

Description

When displaying a Grid inside another Grid using ItemDetailsRenderer, scrolling events are processed improperly.

Expected outcome

When hovering the parent grid, only the parent grid should scroll. When hovering the child grid, only the child grid should scroll.

Actual outcome

In Firefox: When hovering the child grid and scrolling using the mouse-wheel, the child grid AND the parent grid scrolls, moving the child grid out of view (Incorrect Behavior). When scrolling the child grid with the scrollbar, the scrollbar doesn't work. (Incorrect Behavior)

In Chrome: When hovering the child grid and scrolling using the mouse-wheel, the child grid AND the parent grid scrolls, moving the child grid out of view (Incorrect Behavior). When scrolling the child grid with the scrollbar, only the child scrolls as expected. (Okay)

Live Demo (optional)

https://user-images.githubusercontent.com/2902403/130120178-39f95f75-43a2-476d-9fbd-fa0386ad4e08.mp4

Minimal reproducible example

import com.vaadin.flow.component.grid.Grid;
import com.vaadin.flow.component.orderedlayout.VerticalLayout;
import com.vaadin.flow.data.renderer.ComponentRenderer;
import com.vaadin.flow.router.Route;

import java.util.ArrayList;
import java.util.List;

@Route(value = "TestGrid", layout = MainLayout.class)
public class TestGridView extends VerticalLayout {
    static class TestItem {
        private final String content;
        TestItem(String content) {
            this.content = content;
        }
        String getContent() {
            return content;
        }
    }

    TestGridView() {
        setSizeFull();

        List<TestItem> itemList = new ArrayList<>();

        for (int i = 0; i < 100; i++) {
            itemList.add(new TestItem("Entry " + i));
        }

        Grid<TestItem> grid = new Grid<>(TestItem.class);

        grid.setItems(itemList);
        grid.addColumn(TestItem::getContent);

        grid.setDetailsVisibleOnClick(true);
        grid.setItemDetailsRenderer(new ComponentRenderer<>(o -> new TestGridView()));

        add(grid);
    }
}

Steps to reproduce

Create nested grid. Try to scroll child using mousewheel

Environment

Browsers Affected

mrgreywater commented 3 years ago

Workaround: 

grid.addAttachListener(event -> grid.getElement().executeJs("this.addEventListener('mousewheel',function(e){e.stopPropagation();})"));