diff --git a/integration/tests/grid-tooltip.test.js b/integration/tests/grid-tooltip.test.js index 6d6f5d0f93d..022ff8ce275 100644 --- 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 index fed3807077e..7adc250f118 100644 --- 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 index 8aa9036e120..d248c871ab6 100644 --- 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 index a70718d2d37..9938e66d857 100644 --- 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(); }