Improvements for ContextMenu long press on iOS

[aarongarciah]

At the time of writing, Radix sets WebkitTouchCallout: 'none' inline in the ContextMenu trigger element to avoid showing iOS showing context menu. But the text inside the trigger element gets selected, making the trigger act inconsistently and probably selecting the text is note desirable. See this video capture that demonstrates the current behavior in iOS Safari 14.5 and 15.0

before.mp4

Maybe disabling text selection is not ideal and can have potential consequences although is probably the desired behavior in most occasions. Adding WebkitUserSelect: 'none', userSelect: 'none' in addition to WebkitTouchCallout: 'none' in the trigger element seems to have a better default behaviour, where no text is selected. See this video capture that demonstrates the current behavior in iOS Safari 14.5 and 15.0

after.mp4

(I the video above Safari 14.5 behaves "better" not showing the magnifier glass at all, not sure why 🤷‍♂️)

If adding WebkitUserSelect: 'none', userSelect: 'none' to the trigger element is not desired (since we would be disabling text selection for everyone on that element), some alternatives could be explored:

• Adding WebkitUserSelect: 'none', userSelect: 'none' to the trigger element only in devices with touch as primary input, which could lead to more problems in hybrid devices.
• Explore adding WebkitUserSelect: 'none', userSelect: 'none' when we detect a long press is undergoing, but it would have other potential issues that I can't think of now.

This seems like a fun one to nail 😅

[jjenzz]

Thanks for this 👍 I'll convert it to an issue as I agree that is not an ideal user experience.