fix: update details cell visibility when details renderer set (#3352) (…

…#3353) Co-authored-by: Tomi Virkki <tomivirkki@users.noreply.github.com>
vaadin · Jan 26, 2022 · ee17ea7 · ee17ea7
1 parent 348ea74
commit ee17ea7
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 1 deletion.
diff --git a/packages/grid/src/vaadin-grid-row-details-mixin.js b/packages/grid/src/vaadin-grid-row-details-mixin.js
@@ -83,7 +83,9 @@ export const RowDetailsMixin = (superClass) =>
         Array.from(this.$.items.children).forEach((row) => {
           if (!row.querySelector('[part~=details-cell]')) {
             this._updateRow(row, this._columnTree[this._columnTree.length - 1]);
-            this._a11yUpdateRowDetailsOpened(row, false);
+            const isDetailsOpened = this._isDetailsOpened(row._item);
+            this._a11yUpdateRowDetailsOpened(row, isDetailsOpened);
+            this._toggleDetailsCell(row, isDetailsOpened);
           }
         });
       }

diff --git a/packages/grid/test/row-details.test.js b/packages/grid/test/row-details.test.js
@@ -385,4 +385,44 @@ describe('row details', () => {
       expect(countRowsMarkedAsDetailsOpened(grid)).to.equal(0);
     });
   });
+
+  describe('lazily set details renderer', () => {
+    beforeEach(async () => {
+      grid = fixtureSync(`
+        <vaadin-grid>
+          <vaadin-grid-column path="name"></vaadin-grid-column>
+        </vaadin-grid>
+      `);
+      grid.items = [{ name: 'foo' }];
+      await nextFrame();
+      bodyRows = getRows(grid.$.items);
+    });
+
+    it('should have the details cell initially hidden', async () => {
+      grid.rowDetailsRenderer = () => {};
+      await nextFrame();
+      const detailsCell = bodyRows[0].querySelector('[part~="details-cell"]');
+      expect(detailsCell.hidden).to.be.true;
+      expect(detailsCell.getAttribute('aria-expanded')).to.equal('false');
+    });
+
+    it('should have the details cell initially visible', async () => {
+      grid.detailsOpenedItems = [...grid.items];
+      grid.rowDetailsRenderer = () => {};
+      await nextFrame();
+      const detailsCell = bodyRows[0].querySelector('[part~="details-cell"]');
+      expect(detailsCell.hidden).to.be.false;
+      expect(detailsCell.getAttribute('aria-expanded')).to.equal('true');
+    });
+
+    it('should have the details cell become visible when details opened', async () => {
+      grid.rowDetailsRenderer = () => {};
+      await nextFrame();
+      grid.detailsOpenedItems = [...grid.items];
+      await nextFrame();
+      const detailsCell = bodyRows[0].querySelector('[part~="details-cell"]');
+      expect(detailsCell.hidden).to.be.false;
+      expect(detailsCell.getAttribute('aria-expanded')).to.equal('true');
+    });
+  });
 });