[Tooltip] Long press select text on iOS

packages/material-ui/src/Tooltip/Tooltip.js

@@ -78,13 +78,14 @@ export const styles = (theme) => ({
     padding: '4px 8px',
     fontSize: theme.typography.pxToRem(11),
     maxWidth: 300,
+    margin: 2,
     wordWrap: 'break-word',
     fontWeight: theme.typography.fontWeightMedium,
   },
   /* Styles applied to the tooltip (label wrapper) element if `arrow={true}`. */
   tooltipArrow: {
     position: 'relative',
-    margin: '0',
+    margin: 0,
   },
   /* Styles applied to the arrow element. */
   arrow: {
@@ -195,6 +196,7 @@ const Tooltip = React.forwardRef(function Tooltip(props, ref) {
   const [childNode, setChildNode] = React.useState();
   const [arrowRef, setArrowRef] = React.useState(null);
   const ignoreNonTouchEvents = React.useRef(false);
+  const prevUserSelect = React.useRef();
 
   const disableInteractive = disableInteractiveProp || followCursor;
 
@@ -240,14 +242,22 @@ const Tooltip = React.forwardRef(function Tooltip(props, ref) {
 
   const id = useId(idProp);
 
+  const stopTouchInteraction = useEventCallback(() => {
+    if (prevUserSelect.current !== undefined) {
+      document.body.style.WebkitUserSelect = prevUserSelect.current;
+      prevUserSelect.current = undefined;
+    }
+    clearTimeout(touchTimer.current);
+  });
+
   React.useEffect(() => {
     return () => {
       clearTimeout(closeTimer.current);
       clearTimeout(enterTimer.current);
       clearTimeout(leaveTimer.current);
-      clearTimeout(touchTimer.current);
+      stopTouchInteraction();
     };
-  }, []);
+  }, [stopTouchInteraction]);
 
   const handleOpen = (event) => {
     clearTimeout(hystersisTimer);
@@ -369,9 +379,15 @@ const Tooltip = React.forwardRef(function Tooltip(props, ref) {
     detectTouchStart(event);
     clearTimeout(leaveTimer.current);
     clearTimeout(closeTimer.current);
-    clearTimeout(touchTimer.current);
+    stopTouchInteraction();
     event.persist();
+
+    prevUserSelect.current = document.body.style.WebkitUserSelect;
+    // Prevent iOS text selection on long-tap.
+    document.body.style.WebkitUserSelect = 'none';
+
     touchTimer.current = setTimeout(() => {
+      document.body.style.WebkitUserSelect = prevUserSelect.current;
       handleEnter(event);
     }, enterTouchDelay);
   };

packages/material-ui/src/Tooltip/Tooltip.test.js

@@ -349,6 +349,12 @@ describe('<Tooltip />', () => {
   });
 
   describe('touch screen', () => {
+    const isJSDOM = navigator.userAgent === 'node.js';
+
+    afterEach(() => {
+      document.body.style.WebkitUserSelect = undefined;
+    });
+
     it('should not respond to quick events', () => {
       const { getByRole, queryByRole } = render(
         <Tooltip title="Hello World">
@@ -375,14 +381,14 @@ describe('<Tooltip />', () => {
           title="Hello World"
           TransitionProps={{ timeout: transitionTimeout }}
         >
-          <button id="testChild" type="submit">
-            Hello World
-          </button>
+          <button type="submit">Hello World</button>
         </Tooltip>,
       );
       act(() => {
         fireEvent.touchStart(getByRole('button'));
+        expect(document.body.style.WebkitUserSelect).to.equal('none');
         clock.tick(enterTouchDelay + enterDelay);
+        expect(document.body.style.WebkitUserSelect).to.equal(isJSDOM ? undefined : '');
       });
 
       expect(getByRole('tooltip')).toBeVisible();
@@ -399,6 +405,32 @@ describe('<Tooltip />', () => {
       expect(queryByRole('tooltip')).to.equal(null);
     });
 
+    it('should restore the user-select state correctly', () => {
+      const enterTouchDelay = 700;
+      const enterDelay = 100;
+      const leaveTouchDelay = 1500;
+      const transitionTimeout = 10;
+      const { getByRole } = render(
+        <Tooltip
+          enterTouchDelay={enterTouchDelay}
+          enterDelay={enterDelay}
+          leaveTouchDelay={leaveTouchDelay}
+          title="Hello World"
+          TransitionProps={{ timeout: transitionTimeout }}
+        >
+          <button type="submit">Hello World</button>
+        </Tooltip>,
+      );
+
+      document.body.style.WebkitUserSelect = 'revert';
+      act(() => {
+        fireEvent.touchStart(getByRole('button'));
+        expect(document.body.style.WebkitUserSelect).to.equal('none');
+        clock.tick(enterTouchDelay + enterDelay);
+        expect(document.body.style.WebkitUserSelect.toLowerCase()).to.equal('revert');
+      });
+    });
+
     it('should not open if disableTouchListener', () => {
       const { getByRole, queryByRole } = render(
         <Tooltip title="Hello World" disableTouchListener>