fix: manually restore scroll position for grid in Firefox (#6022) (#6026)

Author: sissbruecker

packages/grid/src/vaadin-grid-scroll-mixin.js

@@ -6,6 +6,7 @@
 import { animationFrame, microTask, timeOut } from '@vaadin/component-base/src/async.js';
 import { Debouncer } from '@vaadin/component-base/src/debounce.js';
 import { getNormalizedScrollLeft } from '@vaadin/component-base/src/dir-utils.js';
+import { isElementHidden } from '@vaadin/component-base/src/focus-utils.js';
 import { ResizeMixin } from '@vaadin/component-base/src/resize-mixin.js';
 
 const timeouts = {
@@ -84,6 +85,19 @@ export const ScrollMixin = (superClass) =>
     _onResize() {
       this._updateOverflow();
       this.__updateHorizontalScrollPosition();
+
+      // For Firefox, manually restore last scroll position when grid becomes
+      // visible again. This solves an issue where switching visibility of two
+      // grids causes Firefox trying to synchronize the scroll positions between
+      // the two grid's table elements.
+      // See https://github.com/vaadin/web-components/issues/5796
+      if (this._firefox) {
+        const isVisible = !isElementHidden(this);
+        if (isVisible && this.__previousVisible === false) {
+          this._scrollTop = this.__memorizedScrollTop || 0;
+        }
+        this.__previousVisible = isVisible;
+      }
     }
 
     /**
@@ -143,6 +157,14 @@ export const ScrollMixin = (superClass) =>
       }
 
       this._updateOverflow();
+
+      // Memorize last scroll position in Firefox
+      if (this._firefox) {
+        const isVisible = !isElementHidden(this);
+        if (isVisible && this.__previousVisible !== false) {
+          this.__memorizedScrollTop = this._scrollTop;
+        }
+      }
     }
 
     /** @private */

packages/grid/test/scroll-restoration.test.js

@@ -0,0 +1,69 @@
+import { expect } from '@esm-bundle/chai';
+import { aTimeout, fixtureSync, isFirefox } from '@vaadin/testing-helpers';
+import '../vaadin-grid.js';
+import { fire, flushGrid, infiniteDataProvider } from './helpers.js';
+
+if (isFirefox) {
+  // This suite tests a fix for an issue in Firefox where switching visibility
+  // of two grids causes the scroll position of the first grid to be reset to 0,
+  // and the scroll position of the second grid is synchronized from the first
+  // grid.
+  // See https://github.com/vaadin/web-components/issues/5796
+  describe('scroll restoration in Firefox', () => {
+    let grid1, grid2;
+
+    beforeEach(() => {
+      const fixture = fixtureSync(`
+      <div>
+        <vaadin-grid style="height: 200px; width: 200px;" size="100">
+          <vaadin-grid-column header="foo"></vaadin-grid-column>
+        </vaadin-grid>
+        <vaadin-grid style="height: 200px; width: 200px;" hidden size="100">
+          <vaadin-grid-column header="bar"></vaadin-grid-column>
+        </vaadin-grid>
+      </div>
+    `);
+      const grids = fixture.querySelectorAll('vaadin-grid');
+      grids.forEach((grid) => {
+        grid.querySelector('vaadin-grid-column').renderer = (root, _, model) => {
+          root.textContent = model.index;
+        };
+        grid.dataProvider = infiniteDataProvider;
+        flushGrid(grid);
+      });
+      grid1 = grids[0];
+      grid2 = grids[1];
+    });
+
+    function toggleVisibility() {
+      grid1.hidden = !grid1.hidden;
+      grid2.hidden = !grid2.hidden;
+    }
+
+    it('should restore scroll position when showing grids', async () => {
+      // Scroll grid
+      grid1.$.table.scrollTop = 300;
+      fire('scroll', {}, { node: grid1.$.table });
+      flushGrid(grid1);
+      await aTimeout(50);
+
+      // Hide first grid, show second grid
+      toggleVisibility();
+      await aTimeout(50);
+
+      // Hide second grid, show first grid again
+      toggleVisibility();
+      await aTimeout(50);
+
+      // Scroll position for first grid should still be 300
+      expect(grid1.$.table.scrollTop).to.equal(300);
+
+      // Show second grid again
+      toggleVisibility();
+      await aTimeout(50);
+
+      // Scroll position for first grid should still be 0
+      expect(grid2.$.table.scrollTop).to.equal(0);
+    });
+  });
+}