fix(tooltip): hide tooltip when touched outside of a component

Fixes: #276

Author: HitomiWin

packages/core/src/Tooltip/__snapshots__/index.test.tsx.snap

@@ -33,7 +33,9 @@ exports[`Tooltip Default 1`] = `
       className="c1"
       id="layer-1"
     >
-      <span>
+      <span
+        onPointerDown={[Function]}
+      >
         Test
       </span>
     </div>
@@ -84,7 +86,9 @@ exports[`Tooltip Expanded 1`] = `
       className="c1"
       id="layer-3"
     >
-      <span>
+      <span
+        onPointerDown={[Function]}
+      >
         Test
       </span>
     </div>
@@ -135,7 +139,9 @@ exports[`Tooltip Expanded 2`] = `
       className="c1"
       id="layer-5"
     >
-      <span>
+      <span
+        onPointerDown={[Function]}
+      >
         Test
       </span>
     </div>
@@ -186,7 +192,9 @@ exports[`Tooltip Expanded 3`] = `
       className="c1"
       id="layer-7"
     >
-      <span>
+      <span
+        onPointerDown={[Function]}
+      >
         Test
       </span>
     </div>

packages/core/src/Tooltip/index.tsx

@@ -10,13 +10,12 @@ import {
 	FC,
 } from 'react'
 import styled, { css } from 'styled-components'
-import { useBoolean } from 'react-hooks-shareable'
+import { useBoolean, useClickOutside } from 'react-hooks-shareable'
 
 import { Typography, TypographyProps } from '../Typography'
 import { PopOver, PopOverProps } from '../PopOver'
 import { shape, spacing, componentSize } from '../designparams'
 import { font } from '../theme'
-import { useTouchScrollDistance } from './utils'
 
 /**
  * Tooltip
@@ -255,7 +254,8 @@ export const Tooltip: FC<TooltipProps | ExpandedTooltipProps> = ({
 	const child = Children.only(children) as ReactElement
 	const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null)
 	// State for click
-	const [visibleByClick, showByClick] = useState(false)
+	const [visibleByClick, _showByClick, hideByClick, toggleByClick] =
+		useBoolean(false)
 	// Delayed state for pointer
 	const [visibleDelayed, showDelayed, hideDelayed] = useBoolean(false)
 	// State for pointer
@@ -266,8 +266,6 @@ export const Tooltip: FC<TooltipProps | ExpandedTooltipProps> = ({
 	// If tooltip should be shown
 	const visible = visibleByClick || debouncedVisible
 
-	const touchScrollDistance = useTouchScrollDistance()
-
 	const toggle = useCallback(
 		(event: PointerEvent) => {
 			// When using touch instead of mouse, we have to toggle the tooltip
@@ -276,24 +274,12 @@ export const Tooltip: FC<TooltipProps | ExpandedTooltipProps> = ({
 				return
 			}
 
-			showByClick(v => !v)
+			toggleByClick()
 		},
-		[showByClick]
+		[toggleByClick]
 	)
 
-	/**
-	 * If the delta for any axis is larger than 150 pixels,
-	 * remove the tooltip from the screen.
-	 */
-	useLayoutEffect(() => {
-		if (!visible) {
-			return
-		}
-		const { x, y } = touchScrollDistance
-		if (Math.max(Math.abs(x), Math.abs(y)) > 150) {
-			showByClick(false)
-		}
-	}, [touchScrollDistance])
+	const handlePointerDown = useClickOutside(hideByClick)
 
 	useEffect(() => {
 		const delayVisible = () => setDebouncedVisible(visibleDelayed)
@@ -375,6 +361,7 @@ export const Tooltip: FC<TooltipProps | ExpandedTooltipProps> = ({
 			<>
 				{cloneElement(child, {
 					ref: setAnchorEl,
+					onPointerDown: handlePointerDown,
 				})}
 				{visible ? (
 					<PopOver anchorEl={anchorEl} {...alignments[layout]} {...props}>
@@ -393,6 +380,7 @@ export const Tooltip: FC<TooltipProps | ExpandedTooltipProps> = ({
 		<>
 			{cloneElement(child, {
 				ref: setAnchorEl,
+				onPointerDown: handlePointerDown,
 			})}
 			{visible ? (
 				<>

packages/ui-tests/src/coreComponents/Tooltip.spec.ts

@@ -85,25 +85,15 @@ context('Tooltip mobile device', { testIsolation: false }, () => {
     cy.get(`[data-cy=${data.tooltipDataCy}]`).should('not.exist')
   })
 
-  it(`Tooltip ${data.tooltipDataCy} should hide when client touch move more than 150 pixels`, () => {
+  it(`Tooltip ${data.tooltipDataCy} should hide when client touch the screen again`, () => {
     // Touch to show tooltip
     cy.get(`[data-cy=${data.textDataCy}]`).trigger('pointerdown')
     cy.get(`[data-cy=${data.tooltipDataCy}]`)
       .should('exist')
       .should('be.visible')
 
-    // Touch move 151 pixels and hide tooltip
-    cy.get(`[data-cy=${data.textDataCy}]`)
-      .parent()
-      .trigger('touchstart', {
-        touches: [{ clientX: 0, clientY: 0, identifier: 0 }],
-      })
-
-    cy.get(`[data-cy=${data.textDataCy}]`)
-      .parent()
-      .trigger('touchmove', {
-        changedTouches: [{ clientX: 151, clientY: 151, identifier: 0 }],
-      })
+    // Touch the screen again
+    cy.get(`[data-cy=${data.textDataCy}]`).parent().trigger('pointerdown')
 
     // Tooltip is not shown
     cy.get(`[data-cy=${data.tooltipDataCy}]`).should('not.exist')