feat(tooltip): suppress touch callout and text selection on longpress invoker for webkit

Author: Knorgias

packages/ui/components/overlays/src/configurations/visibility-trigger-partials/withHoverInteraction.js

@@ -112,6 +112,9 @@ export function withHoverInteraction({
             controller.invokerNode?.addEventListener('mouseenter', handleHoverAndFocus);
             controller.invokerNode?.addEventListener('mouseleave', handleHoverAndFocus);
           } else {
+            controller.invokerNode?.style.setProperty('-webkit-touch-callout', 'none');
+            controller.invokerNode?.style.setProperty('user-select', 'none');
+            controller.invokerNode?.style.setProperty('-webkit-user-select', 'none');
             controller.invokerNode?.addEventListener('contextmenu', preventContextMenu);
             controller.invokerNode?.addEventListener('pointerdown', handleLongpress);
             controller.invokerNode?.addEventListener('pointerup', handleLongpress);
@@ -130,6 +133,9 @@ export function withHoverInteraction({
             controller.invokerNode?.removeEventListener('mouseenter', handleHoverAndFocus);
             controller.invokerNode?.removeEventListener('mouseleave', handleHoverAndFocus);
           } else {
+            controller.invokerNode?.style.removeProperty('-webkit-touch-callout');
+            controller.invokerNode?.style.removeProperty('user-select');
+            controller.invokerNode?.style.removeProperty('-webkit-user-select');
             controller.invokerNode?.removeEventListener('contextmenu', preventContextMenu);
             controller.invokerNode?.removeEventListener('pointerdown', handleLongpress);
             controller.invokerNode?.removeEventListener('pointerup', handleLongpress);

packages/ui/components/overlays/test/withHoverInteraction.test.js

@@ -71,6 +71,17 @@ describe('withHoverInteraction (isHoverSupported: false)', () => {
     expect(ctrl.isShown).to.equal(false);
   });
 
+  it('disables text selection on the invoker on init and restores it on teardown', () => {
+    const { invokerNode } = ctrl;
+    const getUserSelect = () =>
+      invokerNode?.style.getPropertyValue('user-select') ||
+      invokerNode?.style.getPropertyValue('-webkit-user-select');
+    expect(getUserSelect()).to.equal('none');
+
+    ctrl.teardown();
+    expect(getUserSelect()).to.equal('');
+  });
+
   it('does not open on tap-triggered focusin', () => {
     ctrl.invokerNode?.dispatchEvent(new Event('focusin', { bubbles: true }));
     clock.tick(300);