[grid] Cell tooltip can prevent grid from scrolling

[sissbruecker]

Description

When scrolling the grid with a mouse wheel or trackpad a tooltip can block scrolling. After starting to scroll, the tooltip will move under the mouse cursor, after which the grid stops scrolling. After the tooltip disappears the grid continues to scroll.

Bildschirmaufnahme.2022-10-17.um.15.26.40.mov

I could reproduce this in Safari and Firefox on macOS. Was not reproducable in Chrome, as the grid seems to receive mouse events during scrolling here, which means the tooltip is moved to lower cells while scrolling.

Expected outcome

The grid should continue to scroll regardless whether the mouse cursor is over a tooltip or not.

Minimal reproducible example

    <vaadin-grid item-id-path="name">
      <vaadin-grid-selection-column auto-select frozen></vaadin-grid-selection-column>
      <vaadin-grid-tree-column frozen path="name" width="200px" flex-shrink="0"></vaadin-grid-tree-column>
      <vaadin-grid-column path="name" width="200px" flex-shrink="0"></vaadin-grid-column>
      <vaadin-grid-column path="name" width="200px" flex-shrink="0"></vaadin-grid-column>
      <vaadin-grid-column path="name" width="200px" flex-shrink="0"></vaadin-grid-column>

      <vaadin-tooltip slot="tooltip" hover-delay="500" hide-delay="500"></vaadin-tooltip>
    </vaadin-grid>

    <script type="module">
      import '@vaadin/grid/all-imports';
      import '@vaadin/tooltip';

      const grid = document.querySelector('vaadin-grid');

      grid.dataProvider = ({ parentItem, page, pageSize }, cb) => {
        // Let's have 100 root-level items and 5 items on every child level
        const levelSize = parentItem ? 5 : 100;

        const pageItems = [...Array(Math.min(levelSize, pageSize))].map((_, i) => {
          const indexInLevel = page * pageSize + i;

          return {
            name: `${parentItem ? parentItem.name + '-' : ''}${indexInLevel}`,
            children: true
          };
        });

        cb(pageItems, levelSize);
      };

      const tooltip = document.querySelector('[slot="tooltip"]');
      tooltip.generator = ({column, item}) => {
        return column && column.path && item ? `Tooltip ${column.path} ${item.name}` : '';
      };
    </script>

Steps to reproduce

1. Add the snippet to a page
2. Hover over a cell until the tooltip appears
3. Scroll down using mouse wheel or trackpad

Environment

Vaadin version(s): 23.3

Browsers

Firefox, Safari

[yuriy-fix]

Could consider pointer-events: none.