Grid inside TreeGrid row details: clicking row triggers unwanted scrollIntoView jump to bottom

[ysnbytrk]

Describe the bug

When using a vaadin-grid inside the row details (expanded rows) of a parent vaadin-grid (tree structure), clicking on a row in the inner grid causes the page to unexpectedly scroll/jump to the bottom of the page.

Architecture

Our application has a nested grid structure:

1. Outer TreeGrid (vaadin-grid#synchronization-tree-grid) - displays calendar weeks as expandable tree nodes
2. Row Details Content - when a week is expanded, it renders an inner grid
3. Inner Grid (vaadin-grid inside rtt-planning-order-grid custom element) - displays planning orders with all-rows-visible attribute

synchronization-view
└── synchronization-tree (vaadin-grid with tree toggle)
    └── row-details (when expanded)
        └── rtt-planning-order-grid (custom element)
            └── vaadin-grid (with all-rows-visible)

The Problem

When a user clicks on any row in the inner grid (to select it or open row details), the browser scrolls to the bottom of the page. We suspect this is related to Vaadin's grid internally calling scrollIntoView() on the selected element, but in this nested structure, it causes unexpected scroll behavior.

Current Workaround

We had to implement a complex workaround that:

1. Temporarily overrides Element.prototype.scrollIntoView to a no-op function
2. Saves scroll position before any grid interaction
3. Restores scroll position after grid operations complete
4. Uses custom events (block-scroll-into-view, restore-scroll-position) to coordinate between components

This workaround is fragile, affects global prototypes, and shouldn't be necessary.

Related Code from workaround

// In synchronization-tree.ts - we had to override scrollIntoView globally
private _blockScrollIntoView(): void {
    if (this._isScrollBlocked) return;
    this._isScrollBlocked = true;
    this._originalScrollIntoView = Element.prototype.scrollIntoView;
    this._saveScrollPosition();

    // Override scrollIntoView to do nothing
    Element.prototype.scrollIntoView = function() {
        // Do nothing - blocked
    };
}

// In rtt-planning-order-grid.ts - active-item-changed handler
@active-item-changed="${(event: GridActiveItemChangedEvent<PlanningOrder>) => {
    // Save scroll position before any DOM changes
    const scrollY = window.scrollY;
    const scrollX = window.scrollX;

    this.detailsOpenedItem = order ? [order] : [];

    // Restore scroll position after resize
    requestAnimationFrame(() => {
        if (this.grid) {
            (this.grid as any).notifyResize?.();
        }
        window.scrollTo(scrollX, scrollY);
    });
}}"

Expected-behavior

When clicking on a row in an inner grid (nested inside row details of a parent tree grid):

1. The row should be selected/activated without any page scroll
2. If the inner grid has all-rows-visible attribute, it should not trigger any scrollIntoView behavior
3. Row details expansion in the inner grid should not cause scroll jump
4. The grid should respect the current scroll position and not modify it unexpectedly

The scroll position should remain unchanged when interacting with nested grids.

Reproduction

Steps to Reproduce:

1. Create a parent vaadin-grid configured as a tree (with expandable rows)
2. Use gridRowDetailsRenderer to render an inner vaadin-grid when rows are expanded
3. Set all-rows-visible attribute on the inner grid
4. Have enough content that the page is scrollable
5. Scroll down to middle of the page
6. Click on the toggle to expand a tree row (showing the inner grid)
7. Click on any row in the inner grid

Expected: The row is selected, page scroll position remains the same
Actual: The page jumps/scrolls to the bottom

Minimal Reproduction Structure:

<!-- Outer tree grid -->
<vaadin-grid id="tree-grid"
             .dataProvider=${treeDataProvider}
             .expandedItems="${expandedItems}"
             ${gridRowDetailsRenderer(this.renderRowDetails)}>
    <vaadin-grid-column path="name"
        ${columnBodyRenderer(this.treeToggleRenderer)}>
    </vaadin-grid-column>
</vaadin-grid>

<!-- Row details renderer returns -->
<vaadin-grid all-rows-visible
             @active-item-changed="${this.onInnerRowClick}">
    <!-- inner grid columns -->
</vaadin-grid>

System Info

• Operating System: Windows 10/11
• Vaadin Version: 24.7.1
• Vaadin Grid Version: 24.7.1
• Hilla Version: 24.7.1
• Browser: Latest stable versions of Chrome, Edge, Firefox
• Build Tool: Maven + Vite 6.2.3
• TypeScript: 5.7.3
• Lit: 3.2.1

Note: This is a Vaadin Hilla application (not Flow), using Lit-based web components.

[web-padawan]

Thanks for the issue. Unfortunately it's not easy to reproduce it without a complete example including other parts such as treeToggleRenderer, at least I'm not getting any scroll with a tree grid rendering nested grid in row details. If you could provide an example repository where this problem can be reproduced, it would help us a lot to investigate.

[ysnbytrk]

---

Thank you for looking into this. Here's a complete reproduction example with the exact structure from our codebase.

Complete Minimal Reproduction

import { html, LitElement, css } from 'lit';
import { customElement, state } from 'lit/decorators.js';
import '@vaadin/grid';
import '@vaadin/grid/vaadin-grid-tree-toggle';
import {
    GridActiveItemChangedEvent,
    GridDataProvider,
    GridDataProviderCallback,
    GridDataProviderParams,
} from '@vaadin/grid';
import {
    columnBodyRenderer,
    gridRowDetailsRenderer,
    GridRowDetailsLitRenderer,
    GridColumnBodyLitRenderer,
} from '@vaadin/grid/lit.js';
import { GridTreeToggleExpandedChangedEvent } from '@vaadin/grid/src/vaadin-grid-tree-toggle-mixin';

// ============================================
// DATA TYPES
// ============================================
interface TreeLevel {
    id: string;
    name: string;
    parent: boolean;
}

interface InnerItem {
    id: number;
    name: string;
    value: number;
}

// ============================================
// INNER GRID COMPONENT (rendered in row details of outer grid)
// ============================================
@customElement('inner-grid-component')
class InnerGridComponent extends LitElement {
    @state() private items: InnerItem[] = [];
    @state() private detailsOpenedItems: InnerItem[] = [];

    static styles = css`
        :host { display: block; padding: 16px; background: #f5f5f5; }
    `;

    connectedCallback() {
        super.connectedCallback();
        this.items = Array.from({ length: 10 }, (_, i) => ({
            id: i + 1,
            name: `Item ${i + 1}`,
            value: Math.floor(Math.random() * 1000)
        }));
    }

    render() {
        return html`
            <h4>Inner Grid (click any row to trigger scroll jump)</h4>
            <vaadin-grid
                all-rows-visible
                .items="${this.items}"
                .detailsOpenedItems="${this.detailsOpenedItems}"
                ${gridRowDetailsRenderer(this.innerRowDetailsRenderer)}
                @active-item-changed="${this.onActiveItemChanged}"
            >
                <vaadin-grid-column path="id" header="ID" width="60px"></vaadin-grid-column>
                <vaadin-grid-column path="name" header="Name"></vaadin-grid-column>
                <vaadin-grid-column path="value" header="Value"></vaadin-grid-column>
            </vaadin-grid>
        `;
    }

    private onActiveItemChanged(event: GridActiveItemChangedEvent<InnerItem>) {
        const item = event.detail.value;
        // THIS IS WHERE THE SCROLL JUMP HAPPENS
        // When detailsOpenedItems changes, grid internally calls scrollIntoView
        this.detailsOpenedItems = item ? [item] : [];
    }

    private innerRowDetailsRenderer: GridRowDetailsLitRenderer<InnerItem> = (item) => {
        return html`
            <div style="padding: 16px; background: #e0e0e0;">
                <h5>Details for ${item.name}</h5>
                <p>Value: ${item.value}</p>
            </div>
        `;
    };
}

// ============================================
// OUTER TREE GRID COMPONENT
// This mirrors our synchronization-tree.ts structure
// ============================================
@customElement('outer-tree-grid')
class OuterTreeGrid extends LitElement {
    @state() private expandedItems: TreeLevel[] = [];
    @state() private detailsOpenedItems: TreeLevel[] = [];  // CRITICAL: outer grid also uses detailsOpenedItems

    static styles = css`
        :host { display: block; }
        .spacer {
            height: 500px;
            background: linear-gradient(to bottom, #fff, #eee);
            display: flex; align-items: center; justify-content: center;
        }
    `;

    render() {
        return html`
            <div class="spacer"><p>Scroll down to see tree grid</p></div>

            <h2>Outer Tree Grid</h2>
            <vaadin-grid
                .dataProvider="${this.treeDataProvider}"
                .detailsOpenedItems="${this.detailsOpenedItems}"
                .expandedItems="${this.expandedItems}"
                @expanded-items-changed="${this.onExpandedItemsChanged}"
                ${gridRowDetailsRenderer(this.rowDetailsRenderer)}
                .itemIdPath="${'id'}"
                .itemHasChildrenPath="${'parent'}"
            >
                <vaadin-grid-column path="name"
                    ${columnBodyRenderer(this.treeToggleRenderer)}
                ></vaadin-grid-column>
            </vaadin-grid>

            <div class="spacer"><p>More content below</p></div>
        `;
    }

    // CRITICAL: This handler syncs expandedItems with detailsOpenedItems
    // This is exactly how our production code works
    private onExpandedItemsChanged(event: CustomEvent) {
        this.expandedItems = event.detail.value;
        // detailsOpenedItems follows expandedItems
        this.detailsOpenedItems = this.expandedItems;
    }

    private treeDataProvider: GridDataProvider<TreeLevel> = (
        params: GridDataProviderParams<TreeLevel>,
        callback: GridDataProviderCallback<TreeLevel>
    ) => {
        if (!params.parentItem) {
            const weeks: TreeLevel[] = [
                { id: 'week-01', name: 'Week 01.2025', parent: true },
                { id: 'week-02', name: 'Week 02.2025', parent: true },
                { id: 'week-03', name: 'Week 03.2025', parent: true },
                { id: 'week-04', name: 'Week 04.2025', parent: true },
                { id: 'week-05', name: 'Week 05.2025', parent: true },
            ];
            callback(weeks, weeks.length);
        } else {
            callback([], 0);
        }
    };

    private treeToggleRenderer: GridColumnBodyLitRenderer<TreeLevel> = (item, model) => {
        return html`
            <vaadin-grid-tree-toggle
                .level="${model.level ?? 0}"
                .expanded="${this.expandedItems.some(exp => exp.id === item.id)}"
                @expanded-changed="${(e: GridTreeToggleExpandedChangedEvent) => {
                    if (e.detail.value) {
                        this.expandedItems = [...this.expandedItems, item];
                        this.detailsOpenedItems = [...this.detailsOpenedItems, item];
                    } else {
                        this.expandedItems = this.expandedItems.filter(exp => exp.id !== item.id);
                        this.detailsOpenedItems = this.detailsOpenedItems.filter(exp => exp.id !== item.id);
                    }
                }}"
            ></vaadin-grid-tree-toggle>
            <span>${item.name}</span>
        `;
    };

    private rowDetailsRenderer: GridRowDetailsLitRenderer<TreeLevel> = (item) => {
        if (this.expandedItems.some(exp => exp.id === item.id)) {
            return html`<inner-grid-component></inner-grid-component>`;
        }
        return html``;
    };
}

// ============================================
// MAIN DEMO
// ============================================
@customElement('scroll-bug-demo')
class ScrollBugDemo extends LitElement {
    render() {
        return html`
            <h1>Vaadin Grid Scroll Jump Bug</h1>
            <outer-tree-grid></outer-tree-grid>
        `;
    }
}

Steps to Reproduce

1. Run the example above
2. Scroll down to see the tree grid
3. Click the expand arrow on any week (e.g., "Week 01.2025")
4. Scroll back to middle of page if needed
5. Click on any row in the inner grid (Items 1-10)
6. BUG: The page jumps/scrolls unexpectedly

Key Configuration Causing the Issue

The combination that triggers the bug:

1. Outer grid uses vaadin-grid-tree-toggle for tree expansion
2. Outer grid uses both .expandedItems AND .detailsOpenedItems
3. Outer grid uses gridRowDetailsRenderer to render a custom LitElement component
4. Inner grid (inside row details) has all-rows-visible attribute
5. Inner grid uses its own .detailsOpenedItems for row expansion
6. When clicking a row in inner grid, setting detailsOpenedItems triggers the scroll jump

Critical Structure (from our production code)

Outer grid (synchronization-tree.ts line 234-248):

<vaadin-grid id="synchronization-tree-grid"
    .dataProvider=${this.dataProvider}
    .detailsOpenedItems="${this.detailsOpenedItems}"
    .expandedItems="${this.expandedItems}"
    @expanded-items-changed="${this.onExpandedItemChanged}"
    ${gridRowDetailsRenderer(this.gridRowDetailsRenderer)}
    .itemIdPath="${'id'}"
    .itemHasChildrenPath="${'parent'}"
>

Inner grid (rtt-planning-order-grid.ts line 296-331):

<vaadin-grid id="grid"
    all-rows-visible
    @active-item-changed="${this.onActiveItemChanged}"
    .detailsOpenedItems="${this.detailsOpenedItem}"
    ${gridRowDetailsRenderer(this.gridRowDetailsRenderer)}
>

What We Observed

When clicking on an inner grid row, the grid appears to call scrollIntoView() internally. In this nested structure with both outer and inner grids using detailsOpenedItems, it scrolls the wrong container or calculates the wrong target position.

Our workaround involves temporarily overriding Element.prototype.scrollIntoView to prevent the unwanted scroll.

Environment

• Vaadin: 24.7.1
• Lit: 3.2.1
• TypeScript: 5.7.3
• OS: Windows 10/11
• Browsers: Chrome, Edge, Firefox (latest stable)

[web-padawan]

Pushed a branch with a demo added to the dev page replaced TS with JS). Unfortunately I still can't reproduce the issue:

grid-scroll.mp4

Also, I don't see scrollIntoView() being called inside the grid code and the following shows nothing:

const originalScroll = Element.prototype.scrollIntoView;
Element.prototype.scrollIntoView = function() {
  console.warn('scrolled', this);
  originalScroll.apply(this);
};

The only place where grid calls scrollIntoView() is related to lazy columns which is not relevant for this issue.