refactor: add hostConnected to virtualizer, use it in virtual-list and grid

Author: web-padawan

packages/component-base/src/virtualizer-iron-list-adapter.js

@@ -52,20 +52,6 @@ export class IronListAdapter {
     this.__resizeObserver.observe(this.scrollTarget);
     this.scrollTarget.addEventListener('scroll', () => this._scrollHandler());
 
-    const attachObserver = new ResizeObserver(([{ contentRect }]) => {
-      const isHidden = contentRect.width === 0 && contentRect.height === 0;
-      if (!isHidden && this.__scrollTargetHidden && this.scrollTarget.scrollTop !== this._scrollPosition) {
-        // When removing element from DOM, its scroll position is lost and
-        // virtualizer doesn't re-render when adding it to the DOM again.
-        // Restore scroll position when the scroll target becomes visible,
-        // which is the case e.g. when virtualizer is used inside a dialog.
-        this.scrollTarget.scrollTop = this._scrollPosition;
-      }
-
-      this.__scrollTargetHidden = isHidden;
-    });
-    attachObserver.observe(this.scrollTarget);
-
     this._scrollLineHeight = this._getScrollLineHeight();
     this.scrollTarget.addEventListener('wheel', (e) => this.__onWheel(e));
 
@@ -192,6 +178,14 @@ export class IronListAdapter {
     this.__afterElementsUpdated(updatedElements);
   }
 
+  hostConnected() {
+    if (this.scrollTarget.scrollTop !== this._scrollPosition) {
+      // Restore scroll position, which is reset when host is removed from DOM,
+      // since virtualizer doesn't re-render when adding it to the DOM again.
+      this.scrollTarget.scrollTop = this._scrollPosition;
+    }
+  }
+
   /**
    * Updates the height for a given set of items.
    *

packages/component-base/src/virtualizer.js

@@ -80,4 +80,13 @@ export class Virtualizer {
   flush() {
     this.__adapter.flush();
   }
+
+  /**
+   * Notifies the virtualizer about its host element connected to the DOM.
+   *
+   * @method hostConnected
+   */
+  hostConnected() {
+    this.__adapter.hostConnected();
+  }
 }

packages/component-base/test/virtualizer.test.js

@@ -1,5 +1,5 @@
 import { expect } from '@vaadin/chai-plugins';
-import { aTimeout, fixtureSync, nextFrame, nextResize, oneEvent } from '@vaadin/testing-helpers';
+import { aTimeout, fixtureSync, nextFrame, oneEvent } from '@vaadin/testing-helpers';
 import sinon from 'sinon';
 import { Virtualizer } from '../src/virtualizer.js';
 
@@ -350,18 +350,14 @@ describe('virtualizer', () => {
     expect(initialCount).not.to.be.above(expectedCount);
   });
 
-  it('should preserve scroll position when moving within DOM and changing visibility', async () => {
+  it('should restore scroll position on hostConnected after moving within DOM', async () => {
     scrollTarget.scrollTop = 100;
     await oneEvent(scrollTarget, 'scroll');
 
-    scrollTarget.hidden = true;
-    await nextResize(scrollTarget);
-
     const wrapper = fixtureSync('<div></div>');
     wrapper.appendChild(scrollTarget);
 
-    scrollTarget.hidden = false;
-    await nextResize(scrollTarget);
+    virtualizer.hostConnected();
 
     expect(scrollTarget.scrollTop).to.equal(100);
   });

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

@@ -197,6 +197,7 @@ export const GridMixin = (superClass) =>
     connectedCallback() {
       super.connectedCallback();
       this.isAttached = true;
+      this.__virtualizer.hostConnected();
     }
 
     /** @protected */

packages/grid/test/basic.test.js

@@ -131,6 +131,16 @@ describe('basic features', () => {
     expect(top).to.be.greaterThan(0);
   });
 
+  it('should restore scroll position when moving within DOM', () => {
+    grid.scrollToIndex(99);
+    const top = grid.$.table.scrollTop;
+
+    const wrapper = fixtureSync('<div></div>');
+    wrapper.appendChild(grid);
+
+    expect(grid.$.table.scrollTop).to.eql(top);
+  });
+
   it('reset items', () => {
     grid.size = 100;
 

packages/virtual-list/src/vaadin-virtual-list-mixin.js

@@ -104,6 +104,7 @@ export const VirtualListMixin = (superClass) =>
     connectedCallback() {
       super.connectedCallback();
       document.addEventListener('dragstart', this.__onDocumentDragStart, { capture: true });
+      this.__virtualizer.hostConnected();
     }
 
     /** @protected */

packages/virtual-list/test/virtual-list.test.js

@@ -177,5 +177,17 @@ describe('virtual-list', () => {
         expect(list.getAttribute('overflow')).to.equal('top');
       });
     });
+
+    describe('scroll restoration', () => {
+      it('should restore scroll position when moving within DOM', () => {
+        list.scrollToIndex(50);
+        const top = list.scrollTop;
+
+        const wrapper = fixtureSync('<div></div>');
+        wrapper.appendChild(list);
+
+        expect(list.scrollTop).to.equal(top);
+      });
+    });
   });
 });