fix: ensure row cell parts are in place after setting rowDetailsRenderer (#10443)

Author: vursen

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

@@ -80,8 +80,8 @@ export const A11yMixin = (superClass) =>
      * @param {number} index
      * @private
      */
-    __a11yUpdateRowRowindex(row, index) {
-      row.setAttribute('aria-rowindex', index + this.__a11yGetHeaderRowCount(this._columnTree) + 1);
+    __a11yUpdateRowRowindex(row) {
+      row.setAttribute('aria-rowindex', row.index + this.__a11yGetHeaderRowCount(this._columnTree) + 1);
     }
 
     /**

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

@@ -661,11 +661,6 @@ export const GridMixin = (superClass) =>
       }
 
       row.index = index;
-
-      this._updateRowOrderParts(row, index);
-
-      this.__a11yUpdateRowRowindex(row, index);
-
       this.__ensureRowItem(row);
       this.__ensureRowHierarchy(row);
       this.__updateRow(row);
@@ -678,17 +673,17 @@ export const GridMixin = (superClass) =>
     }
 
     /** @private */
-    _updateRowOrderParts(row, index = row.index) {
+    __updateRowOrderParts(row) {
       updateBooleanRowStates(row, {
-        first: index === 0,
-        last: index === this._flatSize - 1,
-        odd: index % 2 !== 0,
-        even: index % 2 === 0,
+        first: row.index === 0,
+        last: row.index === this._flatSize - 1,
+        odd: row.index % 2 !== 0,
+        even: row.index % 2 === 0,
       });
     }
 
     /** @private */
-    _updateRowStateParts(row, { item, expanded, selected, detailsOpened }) {
+    __updateRowStateParts(row, { item, expanded, selected, detailsOpened }) {
       updateBooleanRowStates(row, {
         expanded,
         collapsed: this.__isRowExpandable(row),
@@ -710,11 +705,7 @@ export const GridMixin = (superClass) =>
     _renderColumnTree(columnTree) {
       iterateChildren(this.$.items, (row) => {
         this.__initRow(row, columnTree[columnTree.length - 1], 'body', false, true);
-
-        const model = this.__getRowModel(row);
-        this._updateRowOrderParts(row);
-        this._updateRowStateParts(row, model);
-        this._filterDragAndDrop(row, model);
+        this.__updateRow(row);
       });
 
       while (this.$.header.children.length < columnTree.length) {
@@ -791,6 +782,9 @@ export const GridMixin = (superClass) =>
      * @private
      */
     __updateRow(row) {
+      this.__a11yUpdateRowRowindex(row);
+      this.__updateRowOrderParts(row);
+
       const item = this.__getRowItem(row);
       if (item) {
         this.__updateRowLoading(row, false);
@@ -807,7 +801,7 @@ export const GridMixin = (superClass) =>
       this.__a11yUpdateRowLevel(row, model.level);
       this.__a11yUpdateRowSelected(row, model.selected);
 
-      this._updateRowStateParts(row, model);
+      this.__updateRowStateParts(row, model);
 
       this._generateCellClassNames(row, model);
       this._generateCellPartNames(row, model);

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

@@ -82,8 +82,7 @@ export const RowDetailsMixin = (superClass) =>
         iterateChildren(this.$.items, (row) => {
           if (!row.querySelector('[part~=details-cell]')) {
             this.__initRow(row, this._columnTree[this._columnTree.length - 1]);
-            const isDetailsOpened = this._isDetailsOpened(row._item);
-            this._toggleDetailsCell(row, isDetailsOpened);
+            this.__updateRow(row);
           }
         });
       }

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

@@ -329,7 +329,7 @@ describe('row details', () => {
           <vaadin-grid-column path="name"></vaadin-grid-column>
         </vaadin-grid>
       `);
-      grid.items = [{ name: 'foo' }];
+      grid.items = [{ name: 'foo' }, { name: 'bar' }];
       await nextFrame();
       bodyRows = getRows(grid.$.items);
     });
@@ -357,6 +357,14 @@ describe('row details', () => {
       const detailsCell = bodyRows[0].querySelector('[part~="details-cell"]');
       expect(detailsCell.hidden).to.be.false;
     });
+
+    it('should have order state parts on cells', async () => {
+      grid.detailsOpenedItems = [...grid.items];
+      grid.rowDetailsRenderer = () => {};
+      await nextFrame();
+      expect(bodyRows[0].children[0].getAttribute('part')).to.include('first-row-cell');
+      expect(bodyRows[1].children[0].getAttribute('part')).to.include('last-row-cell');
+    });
   });
 
   describe('details cell height change', () => {