[Popper] Fix potential issues with non-measured positioning

[benoitgrelard]

Closes #540

The issue is kinda intricate but I will try and give a summary here…

• For a popper to position itself it needs a few measurements (anchor react, popper size)
• Until these measurements are available, the popper needs to be measurable, but not visible, nor impact the flow/layout
• For this, we return some default styles where it is positioned fixed, out of the flow, and also had pointer-events: none to avoid catching any events
• That said, we can see here that some events were still caught (including hover)
• This is because DropdownMenu and others use DismissableLayer and sometimes set disabledOutsidePointerEvents: true
• This in turn puts pointerEvents: 'none' on document.body and pointerEvents: 'auto' on the content part, so in this case it puts it on what ends up being the primitive wrapped by the outer popper div
• So even though in the popper we say prevent pointer events, it gets re-enabled

[benoitgrelard]

Whilst writing the recap in the issue description, I'm still wondering whether it makes more sense to actually apply the pointerEvents properly as we actually have what it takes to do so, and it seems like a more precise fix for the situation described.

It's that different from what we already do there:
https://github.com/radix-ui/primitives/blob/main/packages/react/popper/src/Popper.tsx#L100-L104

[jjenzz]

It seems we created a conflict of issues because the element is on the page during measuring phase when it shouldn't be. If it's off the page, it can't get pointer events so pointerEvents: none wouldn't really matter.

I'm happy with either approach tho tbh 🙂

[benoitgrelard]

Yeah I suppose that's true haha
So I guess from that standpoint this fix is just as legitimate then. Let's roll with it.