ReactGrid v4 allows pointer events to pass through overlaid DOM elements

[gshishkov]

Describe the bug
When a DOM element appears on top of the ReactGrid table (e.g., a dropdown list, popup, or overlay loading layer), ReactGrid still receives pointer events. Even though the overlaid element should block interaction with the grid, ReactGrid reacts as if the user interacted with the underlying cell.

Current behavior
When clicking or dragging on an element that is visually above the grid:

• ReactGrid triggers a focus change on the cell located under the mouse pointer.
• ReactGrid may also react to other pointer events (e.g., drag, mouse down, etc.).
• The intended interaction with the overlaid element still happens, but the grid processes the event as well, causing unexpected behavior.

Expected behavior
Pointer events should not be passed through overlaid DOM elements.
When a popup, dropdown, or overlay is on top of the table, all pointer events should be captured by the top element only, and ReactGrid should not respond.

Screenshots or gifs
https://drive.google.com/file/d/1L6iyEo_weh1jmRX0EKxfmfqw8BfeWbHC/view?usp=sharing

Your environment details

• ReactGrid version: 4.1.15
• Device: Desktop
• OS: Windows & macOS
• Browser: Chrome