refactor: only re-render affected rows on grid details opened change (#11398)

Author: vursen

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

@@ -397,22 +397,6 @@ export const DataProviderMixin = (superClass) =>
       return this.getItemId(item1) === this.getItemId(item2);
     }
 
-    /**
-     * @param {!GridItem} item
-     * @param {!Array<!GridItem>} array
-     * @return {number}
-     * @protected
-     */
-    _getItemIndexInArray(item, array) {
-      let result = -1;
-      array.forEach((i, idx) => {
-        if (this._itemsEqual(i, item)) {
-          result = idx;
-        }
-      });
-      return result;
-    }
-
     /**
      * Scroll to a specific row index in the virtual list. Note that the row index is
      * not always the same for any particular item. For example, sorting or filtering

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

@@ -3,7 +3,7 @@
  * Copyright (c) 2016 - 2026 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import { iterateChildren, updatePart } from './vaadin-grid-helpers.js';
+import { updatePart } from './vaadin-grid-helpers.js';
 
 /**
  * @polymerMixin
@@ -50,6 +50,15 @@ export const RowDetailsMixin = (superClass) =>
         _detailsCells: {
           type: Array,
         },
+
+        /**
+         * Set of opened details item ids
+         * @private
+         */
+        __detailsOpenedKeys: {
+          type: Object,
+          computed: '__computeDetailsOpenedKeys(itemIdPath, detailsOpenedItems)',
+        },
       };
     }
 
@@ -79,26 +88,24 @@ export const RowDetailsMixin = (superClass) =>
 
       if (this._columnTree) {
         // Only update the rows if the column tree has already been initialized
-        iterateChildren(this.$.items, (row) => {
+        this._getRenderedRows().forEach((row) => {
           if (!row.querySelector('[part~=details-cell]')) {
             this.__initRow(row, this._columnTree[this._columnTree.length - 1]);
             this.__updateRow(row);
+            return;
+          }
+
+          if (row.hasAttribute('details-opened')) {
+            this.__updateRow(row);
           }
         });
       }
     }
 
     /** @private */
     _detailsOpenedItemsChanged(_detailsOpenedItems, rowDetailsRenderer) {
-      iterateChildren(this.$.items, (row) => {
-        // Re-renders the row to possibly close the previously opened details.
-        if (row.hasAttribute('details-opened')) {
-          this.__updateRow(row);
-          return;
-        }
-
-        // Re-renders the row to open the details when a row details renderer is provided.
-        if (rowDetailsRenderer && this._isDetailsOpened(row._item)) {
+      this._getRenderedRows().forEach((row) => {
+        if (row.hasAttribute('details-opened') !== !!(rowDetailsRenderer && this._isDetailsOpened(row._item))) {
           this.__updateRow(row);
         }
       });
@@ -165,7 +172,7 @@ export const RowDetailsMixin = (superClass) =>
 
     /** @protected */
     _updateDetailsCellHeights() {
-      iterateChildren(this.$.items, (row) => {
+      this._getRenderedRows().forEach((row) => {
         this._updateDetailsCellHeight(row);
       });
     }
@@ -176,7 +183,17 @@ export const RowDetailsMixin = (superClass) =>
      * @protected
      */
     _isDetailsOpened(item) {
-      return this.detailsOpenedItems && this._getItemIndexInArray(item, this.detailsOpenedItems) !== -1;
+      return this.__detailsOpenedKeys && this.__detailsOpenedKeys.has(this.getItemId(item));
+    }
+
+    /** @private */
+    __computeDetailsOpenedKeys(_itemIdPath, detailsOpenedItems) {
+      const items = detailsOpenedItems || [];
+      const keys = new Set();
+      items.forEach((item) => {
+        keys.add(this.getItemId(item));
+      });
+      return keys;
     }
 
     /**

packages/grid/test/row-details.test.js

@@ -172,34 +172,6 @@ describe('row details', () => {
       grid.closeItemDetails({ value: 'foo0' });
       expect(cells[1].hidden).to.be.true;
     });
-
-    it('should invoke the body renderer when opening details', () => {
-      grid.renderer = sinon.spy();
-
-      openRowDetails(0);
-
-      grid.renderer.args.forEach(([_root, _owner, model], index) => {
-        if (index === 0) {
-          expect(model.detailsOpened).to.be.true;
-        } else {
-          expect(model.detailsOpened).to.be.false;
-        }
-      });
-    });
-
-    it('should invoke the body renderer when closing details', () => {
-      grid.renderer = sinon.spy();
-
-      openRowDetails(0);
-
-      grid.renderer.resetHistory();
-
-      closeRowDetails(0);
-
-      grid.renderer.args.forEach(([_root, _owner, model]) => {
-        expect(model.detailsOpened).to.be.false;
-      });
-    });
   });
 
   describe('repeat', () => {
@@ -322,6 +294,81 @@ describe('row details', () => {
     });
   });
 
+  describe('selective row update', () => {
+    let renderer;
+
+    beforeEach(async () => {
+      grid = fixtureSync(`
+        <vaadin-grid style="width: 50px; height: 400px" size="100">
+          <vaadin-grid-column></vaadin-grid-column>
+        </vaadin-grid>
+      `);
+      grid.rowDetailsRenderer = simpleDetailsRenderer;
+      renderer = sinon.spy(indexRenderer);
+      grid.querySelector('vaadin-grid-column').renderer = renderer;
+
+      grid.dataProvider = infiniteDataProvider;
+      flushGrid(grid);
+      bodyRows = getRows(grid.$.items);
+      await nextFrame();
+
+      renderer.resetHistory();
+    });
+
+    it('should only invoke the body renderer for the opened row', () => {
+      openRowDetails(1);
+
+      expect(renderer).to.be.calledOnce;
+      expect(renderer.firstCall.args[2].index).to.equal(1);
+      expect(renderer.firstCall.args[2].detailsOpened).to.be.true;
+    });
+
+    it('should only invoke the body renderer for the closed row', () => {
+      openRowDetails(1);
+      renderer.resetHistory();
+
+      closeRowDetails(1);
+
+      expect(renderer).to.be.calledOnce;
+      expect(renderer.firstCall.args[2].index).to.equal(1);
+      expect(renderer.firstCall.args[2].detailsOpened).to.be.false;
+    });
+
+    it('should only invoke the body renderer for the newly opened row', () => {
+      openRowDetails(0);
+      renderer.resetHistory();
+
+      openRowDetails(2);
+
+      expect(renderer).to.be.calledOnce;
+      expect(renderer.firstCall.args[2].index).to.equal(2);
+      expect(renderer.firstCall.args[2].detailsOpened).to.be.true;
+    });
+
+    it('should only invoke the body renderer for affected rows when replacing detailsOpenedItems', () => {
+      openRowDetails(0);
+      renderer.resetHistory();
+
+      grid.detailsOpenedItems = [grid._dataProviderController.rootCache.items[2]];
+      flushGrid(grid);
+
+      expect(renderer).to.be.calledTwice;
+      const renderedIndexes = renderer.getCalls().map((call) => call.args[2].index);
+      expect(renderedIndexes).to.include(0);
+      expect(renderedIndexes).to.include(2);
+    });
+
+    it('should not invoke the body renderer when detailsOpenedItems is set to the same value', () => {
+      openRowDetails(1);
+      renderer.resetHistory();
+
+      grid.detailsOpenedItems = [...grid.detailsOpenedItems];
+      flushGrid(grid);
+
+      expect(renderer).to.not.be.called;
+    });
+  });
+
   describe('lazily set details renderer', () => {
     beforeEach(async () => {
       grid = fixtureSync(`