fix: hide and don't show tooltip while scrolling the grid (#4819)

vaadin · Oct 25, 2022 · 1c6b7c3 · 1c6b7c3
1 parent 173376f
commit 1c6b7c3
Show file tree

Hide file tree

Showing 4 changed files with 42 additions and 2 deletions.
diff --git a/integration/tests/grid-tooltip.test.js b/integration/tests/grid-tooltip.test.js
@@ -4,6 +4,7 @@ import {
   aTimeout,
   enter,
   escKeyDown,
+  fire,
   fixtureSync,
   focusin,
   focusout,
@@ -12,6 +13,7 @@ import {
   nextRender,
   tabKeyDown,
 } from '@vaadin/testing-helpers';
+import { sendKeys } from '@web/test-runner-commands';
 import sinon from 'sinon';
 import '@vaadin/grid/vaadin-grid.js';
 import '@vaadin/tooltip/vaadin-tooltip.js';
@@ -209,6 +211,39 @@ describe('tooltip', () => {
     expect(tooltip.opened).to.be.false;
   });
 
+  it('should hide the tooltip when starting scrolling', async () => {
+    const cell = getCell(grid, 0);
+    mouseenter(cell);
+
+    fire(grid.$.table, 'scroll');
+    await nextFrame();
+
+    expect(tooltip.opened).to.be.false;
+  });
+
+  it('should not hide the tooltip when scrolling using keyboard navigation', async () => {
+    const cell = getCell(grid, 0);
+    tabKeyDown(document.body);
+    focusin(cell);
+    expect(tooltip.opened).to.be.true;
+
+    await sendKeys({ press: 'ArrowDown' });
+    fire(grid.$.table, 'scroll');
+    await nextFrame();
+
+    expect(tooltip.opened).to.be.true;
+  });
+
+  it('should not show the tooltip on mouseenter while scrolling', async () => {
+    fire(grid.$.table, 'scroll');
+    await nextFrame();
+
+    const cell = getCell(grid, 0);
+    mouseenter(cell);
+
+    expect(tooltip.opened).to.be.false;
+  });
+
   it('should not set tooltip target if there is no tooltip', async () => {
     const spy = sinon.spy(grid._tooltipController, 'setTarget');
 

diff --git a/packages/grid/src/vaadin-grid-scroll-mixin.js b/packages/grid/src/vaadin-grid-scroll-mixin.js
@@ -137,6 +137,9 @@ export const ScrollMixin = (superClass) =>
       if (!this.hasAttribute('reordering')) {
         this._scheduleScrolling();
       }
+      if (!this.hasAttribute('navigating')) {
+        this._hideTooltip(true);
+      }
 
       this._updateOverflow();
     }

diff --git a/packages/grid/src/vaadin-grid.js b/packages/grid/src/vaadin-grid.js
@@ -675,7 +675,9 @@ class Grid extends ElementMixin(
     // For now we only support tooltip on desktop
     if (!isAndroid && !isIOS) {
       cell.addEventListener('mouseenter', (event) => {
-        this._showTooltip(event);
+        if (!this.$.scroller.hasAttribute('scrolling')) {
+          this._showTooltip(event);
+        }
       });
 
       cell.addEventListener('mouseleave', () => {

diff --git a/packages/grid/test/helpers.js b/packages/grid/test/helpers.js
@@ -2,10 +2,10 @@ import sinon from 'sinon';
 
 export const flushGrid = (grid) => {
   grid._observer.flush();
+  grid._afterScroll();
   if (grid._debounceScrolling) {
     grid._debounceScrolling.flush();
   }
-  grid._afterScroll();
   if (grid._debounceOverflow) {
     grid._debounceOverflow.flush();
   }