fix: fixes for IE11 / Legacy Edge

vaadin · Jan 20, 2022 · 2e793c8 · 2e793c8
1 parent 409b001
commit 2e793c8
Show file tree

Hide file tree

Showing 7 changed files with 40 additions and 20 deletions.
diff --git a/src/vaadin-grid-column-reordering-mixin.html b/src/vaadin-grid-column-reordering-mixin.html
@@ -215,15 +215,24 @@
       if (!this._draggedColumn) {
         this._toggleAttribute('no-content-pointer-events', true, this.$.scroller);
       }
+      // Workaround a ShadyDOM bug
+      this._reorderGhost.hidden = true;
+
       let cell;
-      if (Polymer.Settings.useShadow) {
+      if (this.shadowRoot.elementFromPoint) {
         cell = this.shadowRoot.elementFromPoint(x, y);
       } else {
         cell = document.elementFromPoint(x, y);
+      }
 
-        // Workaround a FF58 bug
+      this._reorderGhost.hidden = false;
+
+      // Workaround FF58/ShadyDOM bugs
+      while (!cell._column && cell.parentElement) {
         if (cell.localName === 'vaadin-grid-cell-content') {
           cell = cell.assignedSlot.parentNode;
+        } else {
+          cell = cell.parentElement;
         }
 
       }

diff --git a/test/.eslintrc.json b/test/.eslintrc.json
@@ -2,6 +2,9 @@
   "env": {
     "es6": true
   },
+  "parserOptions": {
+    "ecmaVersion": 8
+  },
   "rules": {
     "no-unused-vars": 0
   },
@@ -61,6 +64,7 @@
     "getContainerCell": false,
     "footerTrap": false,
     "wheel": false,
-    "whenGridAppearAnimationEnd": false
+    "whenGridAppearAnimationEnd": false,
+    "nextFrame": false
   }
 }
diff --git a/test/basic.html b/test/basic.html
@@ -254,14 +254,15 @@
         });
       });
 
-      it('reorder should not affect light dom', () => {
+      it('reorder should not affect light dom', async() => {
         grid.size = 1000;
+        await nextFrame();
         const wrappers = grid.querySelectorAll('vaadin-grid-cell-content');
 
-        [1, 1, 2, 3, 5, 8, 13, 21, 34, 55, 89, 144].forEach(steps => {
+        [1, 1, 2, 3, 5, 8, 13, 21, 34, 55, 89, 144].forEach(async(steps) => {
           grid.$.table.scrollTop = 5000 + grid._physicalAverage * steps;
-          grid._scrollHandler();
-          grid._debounceScrolling.flush();
+          flushGrid(grid);
+          await nextFrame();
 
           const newWrappers = grid.querySelectorAll('vaadin-grid-cell-content');
           // Expect the light dom order unchanged
@@ -377,16 +378,14 @@
             expect(grid.$.scroller.getBoundingClientRect().width).to.be.closeTo(300 - 2, 1);
           });
 
-          it('should have a visible header after row reorder', done => {
+          it('should have a visible header after row reorder', async() => {
             grid.querySelector('vaadin-grid-column').header = 'header';
             grid.scrollToIndex(300);
-            setTimeout(() => {
-              flushGrid(grid);
-              const {left, top} = grid.getBoundingClientRect();
-              const cell = grid._cellFromPoint(left + 1, top + 1);
-              expect(grid.$.header.contains(cell)).to.be.true;
-              done();
-            });
+            await nextFrame();
+            flushGrid(grid);
+            const {left, top} = grid.getBoundingClientRect();
+            const cell = grid._cellFromPoint(left + 1, top + 1);
+            expect(grid.$.header.contains(cell)).to.be.true;
           });
 
           // Skip this test on iOS 10 since there Safari has a bug that makes this fail (works in iOS 9, 11 and 12)

diff --git a/test/column-resizing.html b/test/column-resizing.html
@@ -99,7 +99,7 @@
       });
 
       function getElementFromPoint(context, x, y) {
-        if (Polymer.Settings.useShadow) {
+        if (context.shadowRoot.elementFromPoint) {
           return context.shadowRoot.elementFromPoint(x, y);
         } else {
           return document.elementFromPoint(x, y);
@@ -176,20 +176,24 @@
         expect(grid.$.scroller.hasAttribute('resizing')).to.be.false;
       });
 
-      it('should not fix width for succeeding columns', () => {
+      it('should not fix width for succeeding columns', async() => {
         grid._columnTree[0][1].width = '50%';
         grid._columnTree[0][1].flexGrow = 1;
+        await nextFrame();
         fire('track', {state: 'start'}, {node: handle});
+        await nextFrame();
         expect(grid._columnTree[0][1].width).to.equal('50%');
         expect(grid._columnTree[0][1].flexGrow).to.equal(1);
       });
 
-      it('should fix width for preceding columns', () => {
+      it('should fix width for preceding columns', async() => {
         grid._columnTree[0][1].resizable = true;
 
         grid._columnTree[0][0].width = '50%';
         grid._columnTree[0][0].flexGrow = 1;
+        await nextFrame();
         fire('track', {state: 'start'}, {node: headerCells[1].querySelector('[part~="resize-handle"]')});
+        await nextFrame();
         expect(grid._columnTree[0][0].width.indexOf('px')).not.to.equal(-1);
         expect(grid._columnTree[0][0].flexGrow).to.equal(0);
       });

diff --git a/test/data-provider.html b/test/data-provider.html
@@ -830,7 +830,7 @@
 
           // Test actual last visible item
           const rect = grid.getBoundingClientRect();
-          const scope = Polymer.Settings.useShadow ? grid.domHost.root : document;
+          const scope = grid.domHost.root.elementFromPoint ? grid.domHost.root : document;
           const lastVisibleItem = scope.elementFromPoint(rect.left + 15, rect.bottom - 15);
           expect(lastVisibleItem.innerText.trim()).to.equal('foo' + (grid.size - 1));
         });

diff --git a/test/helpers.html b/test/helpers.html
@@ -411,4 +411,8 @@
     return event;
   };
 
+  window.nextFrame = () => {
+    return new Promise((resolve) => requestAnimationFrame(() => resolve()));
+  };
+
 </script>
diff --git a/test/scroll-to-index.html b/test/scroll-to-index.html
@@ -153,7 +153,7 @@
           grid.scrollToIndex(targetIndex);
 
           const rect = grid.$.header.getBoundingClientRect();
-          const cell = (Polymer.Settings.useShadow ? grid.shadowRoot : document).elementFromPoint(rect.left + 1, rect.bottom + 2);
+          const cell = (grid.shadowRoot.elementFromPoint ? grid.shadowRoot : document).elementFromPoint(rect.left + 1, rect.bottom + 2);
           expect(cell.parentElement.index).to.equal(targetIndex);
         });