Manually watch for link, button clicks in tooltip

storybookjs · Jun 17, 2019 · 87db8c9 · 87db8c9
1 parent 53e807a
commit 87db8c9
Showing 1 changed file with 18 additions and 9 deletions.
diff --git a/src/components/tooltip/WithTooltip.js b/src/components/tooltip/WithTooltip.js
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useRef, useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
 import TooltipTrigger from 'react-popper-tooltip';
@@ -27,16 +27,24 @@ function WithTooltip({
   startOpen,
   ...props
 }) {
+  const tooltipWrapperRef = useRef(null);
   const Container = svg ? TargetSvgContainer : TargetContainer;
   const [isTooltipShown, setTooltipShown] = useState(startOpen);
   const toggleTooltipShown = () => setTooltipShown(!isTooltipShown);
-  const closeTooltipOnClick = () => {
-    if (!closeOnClick) {
+  const closeTooltip = () => setTooltipShown(false);
+
+  useEffect(() => {
+    if (!tooltipWrapperRef.current || !closeOnClick) {
       return;
     }
 
-    setTooltipShown(false);
-  };
+    const clickableElements = tooltipWrapperRef.current.querySelectorAll('a, button');
+    clickableElements.forEach(element => element.addEventListener('click', closeTooltip));
+
+    // eslint-disable-next-line consistent-return
+    return () =>
+      clickableElements.forEach(element => element.removeEventListener('click', closeTooltip));
+  });
 
   return (
     <TooltipTrigger
@@ -58,12 +66,13 @@ function WithTooltip({
           tooltipRef={tooltipRef}
           arrowRef={arrowRef}
           arrowProps={getArrowProps()}
-          onClick={closeTooltipOnClick}
           {...getTooltipProps()}
         >
-          {typeof tooltip === 'function'
-            ? tooltip({ onHide: () => setTooltipShown(false) })
-            : tooltip}
+          <div ref={tooltipWrapperRef}>
+            {typeof tooltip === 'function'
+              ? tooltip({ onHide: () => setTooltipShown(false) })
+              : tooltip}
+          </div>
         </Tooltip>
       )}
     >