[Tooltip] Ensure user-select CSS property is reverted after touch e…

…nd (mui#28372)
gpvidal · Sep 16, 2021 · 0f24c7c · 0f24c7c
1 parent d9aed9c
commit 0f24c7c
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 1 deletion.
diff --git a/packages/mui-material/src/Tooltip/Tooltip.js b/packages/mui-material/src/Tooltip/Tooltip.js
@@ -459,7 +459,7 @@ const Tooltip = React.forwardRef(function Tooltip(inProps, ref) {
       children.props.onTouchEnd(event);
     }
 
-    clearTimeout(touchTimer.current);
+    stopTouchInteraction();
     clearTimeout(leaveTimer.current);
     leaveTimer.current = setTimeout(() => {
       handleClose(event);

diff --git a/packages/mui-material/src/Tooltip/Tooltip.test.js b/packages/mui-material/src/Tooltip/Tooltip.test.js
@@ -1130,6 +1130,23 @@ describe('<Tooltip />', () => {
       expect(document.body.style.WebkitUserSelect.toLowerCase()).to.equal('revert');
     });
 
+    it('ensures text-selection is reset after single press', () => {
+      const { getByRole } = render(
+        <Tooltip title="Hello World">
+          <button type="submit">Hello World</button>
+        </Tooltip>,
+      );
+      document.body.style.WebkitUserSelect = 'revert';
+
+      fireEvent.touchStart(getByRole('button'));
+
+      expect(document.body.style.WebkitUserSelect).to.equal('none');
+
+      fireEvent.touchEnd(getByRole('button'));
+
+      expect(document.body.style.WebkitUserSelect).to.equal('revert');
+    });
+
     it('restores user-select when unmounted during longpress', () => {
       const enterTouchDelay = 700;
       const enterDelay = 100;