fix: handle showing hidden column while clearing grid filter (#2200)

Author: hdamr

src/vaadin-grid-column.html

@@ -322,7 +322,15 @@
       }
 
       cells.forEach(cell => {
-        const model = this._grid.__getRowModel(cell.parentElement);
+        const parent = cell.parentElement;
+
+        // When a column is made hidden and shown again, in some instances it breaks rendering of rows for grid
+        // this happens when parent element of cell is null, which might not be set correctly during rendering
+        // the newly shown column, this check simply avoid that case
+        if (!parent) {
+          return;
+        }
+        const model = this._grid.__getRowModel(parent);
 
         if (renderer) {
           cell._renderer = renderer;

test/filtering.html

@@ -70,6 +70,15 @@
     </template>
   </test-fixture>
 
+  <test-fixture id="grid-with-external-filter">
+    <template>
+      <vaadin-grid>
+        <vaadin-grid-column path="first"></vaadin-grid-column>
+        <vaadin-grid-column id="last" path="last"></vaadin-grid-column>
+      </vaadin-grid>
+    </template>
+  </test-fixture>
+
   <script>
 
     describe('filter', () => {
@@ -331,6 +340,40 @@
       });
 
     });
+
+    describe('in-memory filtering and hiding a column', () => {
+      it('should correctly display items after filter is cleared and column is made visible', () => {
+        const grid = fixture('grid-with-external-filter');
+        const column = grid.querySelector('#last');
+        // this is the minimum amount of items that should be in data-provider in order to see the bug
+        const itemCount = 56;
+        const items = Array.apply(null, Array(itemCount)).map((_, i) => {
+          return {
+            first: 'foo' + i,
+            last: 'bar' + i
+          };
+        });
+        grid.items = items;
+        flushGrid(grid);
+
+        // filter the data and hide one column
+        column.hidden = true;
+        grid.items = items.filter(item => item.first === 'foo55');
+        flushGrid(grid);
+
+        // clear filter and show column again
+        column.hidden = false;
+        grid.items = items;
+        flushGrid(grid);
+
+        // get cell content of 5th row and check if it is displayed correctly
+        const bodyRows = getRows(grid.$.items);
+        const rowCells = getRowCells(bodyRows[5]);
+        const cellContent = getCellContent(rowCells[1]).textContent;
+    
+        expect(cellContent).to.be.equal('bar5');
+      });
+    });
   </script>
 
 </body>