From a750bee3ab78bc10e4d5ff97d656cdd04a010bba Mon Sep 17 00:00:00 2001
From: hmaddisb <madba061@student.liu.se>
Date: Tue, 10 Nov 2020 14:09:08 +0100
Subject: [PATCH 01/13] [Tooltip] Long press select text on iOS

---
 packages/material-ui/src/Tooltip/Tooltip.js | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/packages/material-ui/src/Tooltip/Tooltip.js b/packages/material-ui/src/Tooltip/Tooltip.js
index 8739d9c7ec93a0..c7b1d9aacd7639 100644
--- a/packages/material-ui/src/Tooltip/Tooltip.js
+++ b/packages/material-ui/src/Tooltip/Tooltip.js
@@ -195,6 +195,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(null);
 
   const disableInteractive = disableInteractiveProp || followCursor;
 
@@ -281,6 +282,7 @@ const Tooltip = React.forwardRef(function Tooltip(props, ref) {
       clearTimeout(closeTimer.current);
       closeTimer.current = setTimeout(() => {
         ignoreNonTouchEvents.current = false;
+        document.body.style.WebkitUserSelect = prevUserSelect.current;
       }, theme.transitions.duration.shortest);
     },
   );
@@ -355,6 +357,9 @@ const Tooltip = React.forwardRef(function Tooltip(props, ref) {
 
   const detectTouchStart = (event) => {
     ignoreNonTouchEvents.current = true;
+    prevUserSelect.current = document.body.style.WebkitUserSelect;
+    // Prevent iOS text selection on long-tap.
+    document.body.style.WebkitUserSelect = 'none';
 
     const childrenProps = children.props;
     if (childrenProps.onTouchStart) {
@@ -407,6 +412,7 @@ const Tooltip = React.forwardRef(function Tooltip(props, ref) {
     document.addEventListener('keydown', handleKeyDown);
 
     return () => {
+      document.body.style.WebkitUserSelect = prevUserSelect.current;
       document.removeEventListener('keydown', handleKeyDown);
     };
   }, [handleClose, open]);

From add84a10681f8e0b8205d66d87e0b93b01bce75f Mon Sep 17 00:00:00 2001
From: Olivier Tassinari <olivier.tassinari@gmail.com>
Date: Tue, 10 Nov 2020 22:09:02 +0100
Subject: [PATCH 02/13] simpler solution

---
 packages/material-ui/src/Tooltip/Tooltip.js | 15 ++++++++-------
 1 file changed, 8 insertions(+), 7 deletions(-)

diff --git a/packages/material-ui/src/Tooltip/Tooltip.js b/packages/material-ui/src/Tooltip/Tooltip.js
index c7b1d9aacd7639..1f5870fe4fdf2e 100644
--- a/packages/material-ui/src/Tooltip/Tooltip.js
+++ b/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: '2px',
     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,7 +196,6 @@ 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(null);
 
   const disableInteractive = disableInteractiveProp || followCursor;
 
@@ -282,7 +282,6 @@ const Tooltip = React.forwardRef(function Tooltip(props, ref) {
       clearTimeout(closeTimer.current);
       closeTimer.current = setTimeout(() => {
         ignoreNonTouchEvents.current = false;
-        document.body.style.WebkitUserSelect = prevUserSelect.current;
       }, theme.transitions.duration.shortest);
     },
   );
@@ -357,9 +356,6 @@ const Tooltip = React.forwardRef(function Tooltip(props, ref) {
 
   const detectTouchStart = (event) => {
     ignoreNonTouchEvents.current = true;
-    prevUserSelect.current = document.body.style.WebkitUserSelect;
-    // Prevent iOS text selection on long-tap.
-    document.body.style.WebkitUserSelect = 'none';
 
     const childrenProps = children.props;
     if (childrenProps.onTouchStart) {
@@ -376,7 +372,13 @@ const Tooltip = React.forwardRef(function Tooltip(props, ref) {
     clearTimeout(closeTimer.current);
     clearTimeout(touchTimer.current);
     event.persist();
+
+    const prevUserSelect = document.body.style.WebkitUserSelect;
+    // Prevent iOS text selection on long-tap.
+    document.body.style.WebkitUserSelect = 'none';
+
     touchTimer.current = setTimeout(() => {
+      document.body.style.WebkitUserSelect = prevUserSelect;
       handleEnter(event);
     }, enterTouchDelay);
   };
@@ -412,7 +414,6 @@ const Tooltip = React.forwardRef(function Tooltip(props, ref) {
     document.addEventListener('keydown', handleKeyDown);
 
     return () => {
-      document.body.style.WebkitUserSelect = prevUserSelect.current;
       document.removeEventListener('keydown', handleKeyDown);
     };
   }, [handleClose, open]);

From 947b12cbd8ae5a7e885fcb662c92f122470a1422 Mon Sep 17 00:00:00 2001
From: Olivier Tassinari <olivier.tassinari@gmail.com>
Date: Wed, 11 Nov 2020 10:53:32 +0100
Subject: [PATCH 03/13] sebastian's review

---
 packages/material-ui/src/Tooltip/Tooltip.js | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/packages/material-ui/src/Tooltip/Tooltip.js b/packages/material-ui/src/Tooltip/Tooltip.js
index 1f5870fe4fdf2e..9c9cb5377e435b 100644
--- a/packages/material-ui/src/Tooltip/Tooltip.js
+++ b/packages/material-ui/src/Tooltip/Tooltip.js
@@ -78,7 +78,7 @@ export const styles = (theme) => ({
     padding: '4px 8px',
     fontSize: theme.typography.pxToRem(11),
     maxWidth: 300,
-    margin: '2px',
+    margin: 2,
     wordWrap: 'break-word',
     fontWeight: theme.typography.fontWeightMedium,
   },
@@ -196,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;
 
@@ -246,6 +247,7 @@ const Tooltip = React.forwardRef(function Tooltip(props, ref) {
       clearTimeout(closeTimer.current);
       clearTimeout(enterTimer.current);
       clearTimeout(leaveTimer.current);
+      document.body.style.WebkitUserSelect = prevUserSelect.current;
       clearTimeout(touchTimer.current);
     };
   }, []);
@@ -370,15 +372,16 @@ const Tooltip = React.forwardRef(function Tooltip(props, ref) {
     detectTouchStart(event);
     clearTimeout(leaveTimer.current);
     clearTimeout(closeTimer.current);
+    document.body.style.WebkitUserSelect = prevUserSelect.current;
     clearTimeout(touchTimer.current);
     event.persist();
 
-    const prevUserSelect = document.body.style.WebkitUserSelect;
+    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;
+      document.body.style.WebkitUserSelect = prevUserSelect.current;
       handleEnter(event);
     }, enterTouchDelay);
   };
@@ -388,6 +391,7 @@ const Tooltip = React.forwardRef(function Tooltip(props, ref) {
       children.props.onTouchEnd(event);
     }
 
+    document.body.style.WebkitUserSelect = prevUserSelect.current;
     clearTimeout(touchTimer.current);
     clearTimeout(leaveTimer.current);
     event.persist();

From 21fbc07d740684f1fe4410fa9edb2b1572dfe813 Mon Sep 17 00:00:00 2001
From: Olivier Tassinari <olivier.tassinari@gmail.com>
Date: Wed, 11 Nov 2020 18:05:38 +0100
Subject: [PATCH 04/13] fix bug

---
 packages/material-ui/src/Tooltip/Tooltip.js   | 16 ++++++---
 .../material-ui/src/Tooltip/Tooltip.test.js   | 36 ++++++++++++++++++-
 2 files changed, 46 insertions(+), 6 deletions(-)

diff --git a/packages/material-ui/src/Tooltip/Tooltip.js b/packages/material-ui/src/Tooltip/Tooltip.js
index 9c9cb5377e435b..69ca043f72a336 100644
--- a/packages/material-ui/src/Tooltip/Tooltip.js
+++ b/packages/material-ui/src/Tooltip/Tooltip.js
@@ -242,15 +242,22 @@ const Tooltip = React.forwardRef(function Tooltip(props, ref) {
 
   const id = useId(idProp);
 
+  const stopTouchInteraction = useEventCallback(() => {
+    if (prevUserSelect.current) {
+      document.body.style.WebkitUserSelect = prevUserSelect.current;
+      prevUserSelect.current = undefined;
+    }
+    clearTimeout(touchTimer.current);
+  });
+
   React.useEffect(() => {
     return () => {
       clearTimeout(closeTimer.current);
       clearTimeout(enterTimer.current);
       clearTimeout(leaveTimer.current);
-      document.body.style.WebkitUserSelect = prevUserSelect.current;
-      clearTimeout(touchTimer.current);
+      stopTouchInteraction();
     };
-  }, []);
+  }, [stopTouchInteraction]);
 
   const handleOpen = (event) => {
     clearTimeout(hystersisTimer);
@@ -372,8 +379,7 @@ const Tooltip = React.forwardRef(function Tooltip(props, ref) {
     detectTouchStart(event);
     clearTimeout(leaveTimer.current);
     clearTimeout(closeTimer.current);
-    document.body.style.WebkitUserSelect = prevUserSelect.current;
-    clearTimeout(touchTimer.current);
+    stopTouchInteraction();
     event.persist();
 
     prevUserSelect.current = document.body.style.WebkitUserSelect;
diff --git a/packages/material-ui/src/Tooltip/Tooltip.test.js b/packages/material-ui/src/Tooltip/Tooltip.test.js
index 2a4a34850cc9eb..a10083d2af3413 100644
--- a/packages/material-ui/src/Tooltip/Tooltip.test.js
+++ b/packages/material-ui/src/Tooltip/Tooltip.test.js
@@ -349,6 +349,10 @@ describe('<Tooltip />', () => {
   });
 
   describe('touch screen', () => {
+    afterEach(() => {
+      document.body.style.WebkitUserSelect = undefined;
+    });
+
     it('should not respond to quick events', () => {
       const { getByRole, queryByRole } = render(
         <Tooltip title="Hello World">
@@ -375,14 +379,16 @@ describe('<Tooltip />', () => {
           title="Hello World"
           TransitionProps={{ timeout: transitionTimeout }}
         >
-          <button id="testChild" type="submit">
+          <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(undefined);
       });
 
       expect(getByRole('tooltip')).toBeVisible();
@@ -399,6 +405,34 @@ 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).to.equal('revert');
+      });
+    });
+
     it('should not open if disableTouchListener', () => {
       const { getByRole, queryByRole } = render(
         <Tooltip title="Hello World" disableTouchListener>

From 50d872b36e70570f76b49d145e7408e2909ebcf9 Mon Sep 17 00:00:00 2001
From: Olivier Tassinari <olivier.tassinari@gmail.com>
Date: Wed, 11 Nov 2020 20:37:19 +0100
Subject: [PATCH 05/13] fix CI

---
 packages/material-ui/src/Tooltip/Tooltip.js    | 17 ++++++++++++-----
 .../material-ui/src/Tooltip/Tooltip.test.js    | 18 +++++++-----------
 2 files changed, 19 insertions(+), 16 deletions(-)

diff --git a/packages/material-ui/src/Tooltip/Tooltip.js b/packages/material-ui/src/Tooltip/Tooltip.js
index 69ca043f72a336..fdcbc106f21093 100644
--- a/packages/material-ui/src/Tooltip/Tooltip.js
+++ b/packages/material-ui/src/Tooltip/Tooltip.js
@@ -18,6 +18,14 @@ function round(value) {
   return Math.round(value * 1e5) / 1e5;
 }
 
+function setUserSelect(style, value) {
+  if (value) {
+    style.setProperty('-webkit-user-select', value);
+  } else {
+    style.removeProperty('-webkit-user-select');
+  }
+}
+
 function arrowGenerator() {
   return {
     '&[data-popper-placement*="bottom"] $arrow': {
@@ -244,7 +252,7 @@ const Tooltip = React.forwardRef(function Tooltip(props, ref) {
 
   const stopTouchInteraction = useEventCallback(() => {
     if (prevUserSelect.current) {
-      document.body.style.WebkitUserSelect = prevUserSelect.current;
+      setUserSelect(document.body.style, prevUserSelect.current);
       prevUserSelect.current = undefined;
     }
     clearTimeout(touchTimer.current);
@@ -382,12 +390,12 @@ const Tooltip = React.forwardRef(function Tooltip(props, ref) {
     stopTouchInteraction();
     event.persist();
 
-    prevUserSelect.current = document.body.style.WebkitUserSelect;
+    prevUserSelect.current = document.body.style.userSelect;
     // Prevent iOS text selection on long-tap.
-    document.body.style.WebkitUserSelect = 'none';
+    setUserSelect(document.body.style, 'none')
 
     touchTimer.current = setTimeout(() => {
-      document.body.style.WebkitUserSelect = prevUserSelect.current;
+      setUserSelect(document.body.style, prevUserSelect.current);
       handleEnter(event);
     }, enterTouchDelay);
   };
@@ -397,7 +405,6 @@ const Tooltip = React.forwardRef(function Tooltip(props, ref) {
       children.props.onTouchEnd(event);
     }
 
-    document.body.style.WebkitUserSelect = prevUserSelect.current;
     clearTimeout(touchTimer.current);
     clearTimeout(leaveTimer.current);
     event.persist();
diff --git a/packages/material-ui/src/Tooltip/Tooltip.test.js b/packages/material-ui/src/Tooltip/Tooltip.test.js
index a10083d2af3413..dec0da5219990b 100644
--- a/packages/material-ui/src/Tooltip/Tooltip.test.js
+++ b/packages/material-ui/src/Tooltip/Tooltip.test.js
@@ -350,7 +350,7 @@ describe('<Tooltip />', () => {
 
   describe('touch screen', () => {
     afterEach(() => {
-      document.body.style.WebkitUserSelect = undefined;
+      document.body.style.removeProperty('-webkit-user-select');
     });
 
     it('should not respond to quick events', () => {
@@ -379,16 +379,14 @@ describe('<Tooltip />', () => {
           title="Hello World"
           TransitionProps={{ timeout: transitionTimeout }}
         >
-          <button 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(undefined);
+        expect(document.body.style.WebkitUserSelect).to.equal('');
       });
 
       expect(getByRole('tooltip')).toBeVisible();
@@ -418,18 +416,16 @@ describe('<Tooltip />', () => {
           title="Hello World"
           TransitionProps={{ timeout: transitionTimeout }}
         >
-          <button type="submit">
-            Hello World
-          </button>
+          <button type="submit">Hello World</button>
         </Tooltip>,
       );
 
-      document.body.style.WebkitUserSelect = 'revert';
+      document.body.style.userSelect = 'revert';
       act(() => {
         fireEvent.touchStart(getByRole('button'));
-        expect(document.body.style.WebkitUserSelect).to.equal('none');
+        expect(document.body.style.userSelect).to.equal('none');
         clock.tick(enterTouchDelay + enterDelay);
-        expect(document.body.style.WebkitUserSelect).to.equal('revert');
+        expect(document.body.style.userSelect).to.equal('revert');
       });
     });
 

From eaf9db718dc06830bc3f3168474ecd6bcb115ced Mon Sep 17 00:00:00 2001
From: Olivier Tassinari <olivier.tassinari@gmail.com>
Date: Wed, 11 Nov 2020 21:13:17 +0100
Subject: [PATCH 06/13] fix CI second try

---
 packages/material-ui/src/Tooltip/Tooltip.js      | 16 ++++------------
 packages/material-ui/src/Tooltip/Tooltip.test.js | 12 +++++++-----
 2 files changed, 11 insertions(+), 17 deletions(-)

diff --git a/packages/material-ui/src/Tooltip/Tooltip.js b/packages/material-ui/src/Tooltip/Tooltip.js
index fdcbc106f21093..696d776ca80de1 100644
--- a/packages/material-ui/src/Tooltip/Tooltip.js
+++ b/packages/material-ui/src/Tooltip/Tooltip.js
@@ -18,14 +18,6 @@ function round(value) {
   return Math.round(value * 1e5) / 1e5;
 }
 
-function setUserSelect(style, value) {
-  if (value) {
-    style.setProperty('-webkit-user-select', value);
-  } else {
-    style.removeProperty('-webkit-user-select');
-  }
-}
-
 function arrowGenerator() {
   return {
     '&[data-popper-placement*="bottom"] $arrow': {
@@ -252,7 +244,7 @@ const Tooltip = React.forwardRef(function Tooltip(props, ref) {
 
   const stopTouchInteraction = useEventCallback(() => {
     if (prevUserSelect.current) {
-      setUserSelect(document.body.style, prevUserSelect.current);
+      document.body.style.WebkitUserSelect = prevUserSelect.current;
       prevUserSelect.current = undefined;
     }
     clearTimeout(touchTimer.current);
@@ -390,12 +382,12 @@ const Tooltip = React.forwardRef(function Tooltip(props, ref) {
     stopTouchInteraction();
     event.persist();
 
-    prevUserSelect.current = document.body.style.userSelect;
+    prevUserSelect.current = document.body.style.WebkitUserSelect;
     // Prevent iOS text selection on long-tap.
-    setUserSelect(document.body.style, 'none')
+    document.body.style.WebkitUserSelect = 'none';
 
     touchTimer.current = setTimeout(() => {
-      setUserSelect(document.body.style, prevUserSelect.current);
+      document.body.style.WebkitUserSelect = prevUserSelect.current;
       handleEnter(event);
     }, enterTouchDelay);
   };
diff --git a/packages/material-ui/src/Tooltip/Tooltip.test.js b/packages/material-ui/src/Tooltip/Tooltip.test.js
index dec0da5219990b..cf6d73c3ca60b5 100644
--- a/packages/material-ui/src/Tooltip/Tooltip.test.js
+++ b/packages/material-ui/src/Tooltip/Tooltip.test.js
@@ -349,8 +349,10 @@ describe('<Tooltip />', () => {
   });
 
   describe('touch screen', () => {
+    const isJSDOM = navigator.userAgent === 'node.js';
+
     afterEach(() => {
-      document.body.style.removeProperty('-webkit-user-select');
+      document.body.style.WebkitUserSelect = undefined;
     });
 
     it('should not respond to quick events', () => {
@@ -386,7 +388,7 @@ describe('<Tooltip />', () => {
         fireEvent.touchStart(getByRole('button'));
         expect(document.body.style.WebkitUserSelect).to.equal('none');
         clock.tick(enterTouchDelay + enterDelay);
-        expect(document.body.style.WebkitUserSelect).to.equal('');
+        expect(document.body.style.WebkitUserSelect).to.equal(isJSDOM ? undefined : '');
       });
 
       expect(getByRole('tooltip')).toBeVisible();
@@ -420,12 +422,12 @@ describe('<Tooltip />', () => {
         </Tooltip>,
       );
 
-      document.body.style.userSelect = 'revert';
+      document.body.style.WebkitUserSelect = 'revert';
       act(() => {
         fireEvent.touchStart(getByRole('button'));
-        expect(document.body.style.userSelect).to.equal('none');
+        expect(document.body.style.WebkitUserSelect).to.equal('none');
         clock.tick(enterTouchDelay + enterDelay);
-        expect(document.body.style.userSelect).to.equal('revert');
+        expect(document.body.style.WebkitUserSelect.toLowerCase()).to.equal('revert');
       });
     });
 

From 44c285445669f92ab92300807958e4fe52e74825 Mon Sep 17 00:00:00 2001
From: Olivier Tassinari <olivier.tassinari@gmail.com>
Date: Wed, 11 Nov 2020 22:56:08 +0100
Subject: [PATCH 07/13] fix test cases

---
 packages/material-ui/src/Tooltip/Tooltip.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/material-ui/src/Tooltip/Tooltip.js b/packages/material-ui/src/Tooltip/Tooltip.js
index 696d776ca80de1..616bbc9ef7e882 100644
--- a/packages/material-ui/src/Tooltip/Tooltip.js
+++ b/packages/material-ui/src/Tooltip/Tooltip.js
@@ -243,7 +243,7 @@ const Tooltip = React.forwardRef(function Tooltip(props, ref) {
   const id = useId(idProp);
 
   const stopTouchInteraction = useEventCallback(() => {
-    if (prevUserSelect.current) {
+    if (prevUserSelect.current !== undefined) {
       document.body.style.WebkitUserSelect = prevUserSelect.current;
       prevUserSelect.current = undefined;
     }

From 02e13667143258969501c79a097274ea6da16380 Mon Sep 17 00:00:00 2001
From: eps1lon <silbermann.sebastian@gmail.com>
Date: Thu, 12 Nov 2020 12:30:43 +0100
Subject: [PATCH 08/13] Idiomatic hook usage

---
 packages/material-ui/src/Tooltip/Tooltip.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/material-ui/src/Tooltip/Tooltip.js b/packages/material-ui/src/Tooltip/Tooltip.js
index 616bbc9ef7e882..ca128d2da64370 100644
--- a/packages/material-ui/src/Tooltip/Tooltip.js
+++ b/packages/material-ui/src/Tooltip/Tooltip.js
@@ -196,7 +196,6 @@ 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;
 
@@ -242,13 +241,14 @@ const Tooltip = React.forwardRef(function Tooltip(props, ref) {
 
   const id = useId(idProp);
 
-  const stopTouchInteraction = useEventCallback(() => {
+  const prevUserSelect = React.useRef();
+  const stopTouchInteraction = React.useCallback(() => {
     if (prevUserSelect.current !== undefined) {
       document.body.style.WebkitUserSelect = prevUserSelect.current;
       prevUserSelect.current = undefined;
     }
     clearTimeout(touchTimer.current);
-  });
+  }, []);
 
   React.useEffect(() => {
     return () => {

From e683e68b35b5ecc2bb7e285fc183a20bd8813c5f Mon Sep 17 00:00:00 2001
From: eps1lon <silbermann.sebastian@gmail.com>
Date: Thu, 12 Nov 2020 12:34:19 +0100
Subject: [PATCH 09/13] properly cleanup tests

---
 .../material-ui/src/Tooltip/Tooltip.test.js   | 63 +++++++++++--------
 1 file changed, 37 insertions(+), 26 deletions(-)

diff --git a/packages/material-ui/src/Tooltip/Tooltip.test.js b/packages/material-ui/src/Tooltip/Tooltip.test.js
index cf6d73c3ca60b5..2ebfd5a25e35f8 100644
--- a/packages/material-ui/src/Tooltip/Tooltip.test.js
+++ b/packages/material-ui/src/Tooltip/Tooltip.test.js
@@ -405,32 +405,6 @@ 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>
@@ -1080,4 +1054,41 @@ describe('<Tooltip />', () => {
       }
     });
   });
+
+  describe('user-select state', () => {
+    let prevWebkitUserSelect;
+    beforeEach(() => {
+      prevWebkitUserSelect = document.body.style.WebkitUserSelect;
+    });
+
+    afterEach(() => {
+      document.body.style.WebkitUserSelect = prevWebkitUserSelect;
+    });
+
+    it('should restore it after longpress', () => {
+      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');
+      });
+    });
+  });
 });

From 51f55e840d9b9a73ed0d716a2f25d48f17f485a1 Mon Sep 17 00:00:00 2001
From: eps1lon <silbermann.sebastian@gmail.com>
Date: Thu, 12 Nov 2020 12:40:48 +0100
Subject: [PATCH 10/13] More explicit test description

---
 packages/material-ui/src/Tooltip/Tooltip.test.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/material-ui/src/Tooltip/Tooltip.test.js b/packages/material-ui/src/Tooltip/Tooltip.test.js
index 2ebfd5a25e35f8..e1468d499a66fb 100644
--- a/packages/material-ui/src/Tooltip/Tooltip.test.js
+++ b/packages/material-ui/src/Tooltip/Tooltip.test.js
@@ -1065,7 +1065,7 @@ describe('<Tooltip />', () => {
       document.body.style.WebkitUserSelect = prevWebkitUserSelect;
     });
 
-    it('should restore it after longpress', () => {
+    it('prevents text-selection during touch-longpress', () => {
       const enterTouchDelay = 700;
       const enterDelay = 100;
       const leaveTouchDelay = 1500;

From f6e81d7b4c0bd5ebdf21419336ffd686fa3e5a0c Mon Sep 17 00:00:00 2001
From: eps1lon <silbermann.sebastian@gmail.com>
Date: Thu, 12 Nov 2020 12:41:16 +0100
Subject: [PATCH 11/13] Add test for unmounting

---
 .../material-ui/src/Tooltip/Tooltip.test.js   | 27 +++++++++++++++++++
 1 file changed, 27 insertions(+)

diff --git a/packages/material-ui/src/Tooltip/Tooltip.test.js b/packages/material-ui/src/Tooltip/Tooltip.test.js
index e1468d499a66fb..6313c149e99040 100644
--- a/packages/material-ui/src/Tooltip/Tooltip.test.js
+++ b/packages/material-ui/src/Tooltip/Tooltip.test.js
@@ -1090,5 +1090,32 @@ describe('<Tooltip />', () => {
         expect(document.body.style.WebkitUserSelect.toLowerCase()).to.equal('revert');
       });
     });
+
+    it('restores user-select when unmounted during longpress', () => {
+      const enterTouchDelay = 700;
+      const enterDelay = 100;
+      const leaveTouchDelay = 1500;
+      const transitionTimeout = 10;
+      const { unmount, 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';
+      // Let updates flush before unmounting
+      act(() => {
+        fireEvent.touchStart(getByRole('button'));
+      });
+      unmount();
+
+      expect(document.body.style.WebkitUserSelect.toLowerCase()).to.equal('revert');
+    });
   });
 });

From f8a5bea355c4cf85eb6558a99ee7fa2ba9d8eca4 Mon Sep 17 00:00:00 2001
From: eps1lon <silbermann.sebastian@gmail.com>
Date: Thu, 12 Nov 2020 12:41:24 +0100
Subject: [PATCH 12/13] Remove unrelated assertions

---
 packages/material-ui/src/Tooltip/Tooltip.test.js | 8 --------
 1 file changed, 8 deletions(-)

diff --git a/packages/material-ui/src/Tooltip/Tooltip.test.js b/packages/material-ui/src/Tooltip/Tooltip.test.js
index 6313c149e99040..0d8af5a5b48d2b 100644
--- a/packages/material-ui/src/Tooltip/Tooltip.test.js
+++ b/packages/material-ui/src/Tooltip/Tooltip.test.js
@@ -349,12 +349,6 @@ 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">
@@ -386,9 +380,7 @@ describe('<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();

From e5b22d232466b28aaf29c2c0ef0c7b6156e502eb Mon Sep 17 00:00:00 2001
From: eps1lon <silbermann.sebastian@gmail.com>
Date: Thu, 12 Nov 2020 12:42:40 +0100
Subject: [PATCH 13/13] entangle act-assert parts

---
 packages/material-ui/src/Tooltip/Tooltip.test.js | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/packages/material-ui/src/Tooltip/Tooltip.test.js b/packages/material-ui/src/Tooltip/Tooltip.test.js
index 0d8af5a5b48d2b..621b5482e676ce 100644
--- a/packages/material-ui/src/Tooltip/Tooltip.test.js
+++ b/packages/material-ui/src/Tooltip/Tooltip.test.js
@@ -1073,14 +1073,16 @@ describe('<Tooltip />', () => {
           <button type="submit">Hello World</button>
         </Tooltip>,
       );
-
       document.body.style.WebkitUserSelect = 'revert';
+
+      fireEvent.touchStart(getByRole('button'));
+
+      expect(document.body.style.WebkitUserSelect).to.equal('none');
+
       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');
       });
+      expect(document.body.style.WebkitUserSelect.toLowerCase()).to.equal('revert');
     });
 
     it('restores user-select when unmounted during longpress', () => {