Using safePolygon in useHover handleClose prevents clicks on outside elements from working

When using safePolygon in the useHover hook to allow interactive contents in Tooltips, that will prevent the first outside click from working, as the hook adds pointer-events: none; to everything else. This is very evident when setting the close delay to a large time.

useHover(context, {
    handleClose: safePolygon(),
    delay: {
        close: 5000
    }
}),

Reproduction: https://codesandbox.io/s/epic-murdock-g3s412?file=/src/Tooltip.tsx

In there, hover over the button to show the Tooltip, then try to click the link below the button. The first click never works while the Tooltip is still open.

[atomiks]

Yep we should track it. I also noticed macOS’ auto-hiding scrollbars appear when a scrolling element has pointer-events: none put on it in Chrome (doesn’t happen in FF/Safari). SafePolygon would have none of these unforseen side effects since it’s local

[atomiks]

SafePolygon would solve all the issues yes, I think that’s the best solution.

By disabling the check, you mean remove the test? You can add a #root, #floating-ui-root { pointer-events: initial; } on the React root/portaled roots for now. Or even body { pointer-events: initial !important } if you don’t care about pointer-events when testing anywhere else. Or fire a pointermove event outside of the polygon area, simulating a real user.