fix: OHIF-307 - Click outside patient info should close tooltip (#1886)

platform/ui/src/components/Thumbnail/Thumbnail.jsx

@@ -1,9 +1,8 @@
-import React, { useRef } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
 import { useDrag } from 'react-dnd';
 import { Icon } from '@ohif/ui';
-import blurHandlerListener from '../../utils/blurHandlerListener';
 
 /**
  *
@@ -31,12 +30,8 @@ const Thumbnail = ({
     },
   });
 
-  const thumbnailElement = useRef(null);
-
   return (
     <div
-      onFocus={() => blurHandlerListener(thumbnailElement)}
-      ref={thumbnailElement}
       className={classnames(
         className,
         'flex flex-col flex-1 px-3 mb-8 cursor-pointer outline-none select-none group'

platform/ui/src/components/ThumbnailNoImage/ThumbnailNoImage.jsx

@@ -1,9 +1,8 @@
-import React, { useRef } from 'react';
+import React from 'react';
 import classnames from 'classnames';
 import PropTypes from 'prop-types';
 import { useDrag } from 'react-dnd';
 import { Icon, Tooltip, Typography } from '@ohif/ui';
-import blurHandlerListener from '../../utils/blurHandlerListener';
 
 const ThumbnailNoImage = ({
   displaySetInstanceUID,
@@ -23,12 +22,8 @@ const ThumbnailNoImage = ({
     },
   });
 
-  const thumbnailElement = useRef(null);
-
   return (
     <div
-      ref={thumbnailElement}
-      onFocus={() => blurHandlerListener(thumbnailElement)}
       className={classnames(
         'flex flex-row flex-1 cursor-pointer outline-none border-transparent hover:border-blue-300 focus:border-blue-300 rounded select-none',
         isActive ? 'border-2 border-primary-light' : 'border'

platform/ui/src/components/ViewportActionBar/ViewportActionBar.jsx

@@ -1,7 +1,8 @@
-import React, { useState } from 'react';
+import React, { useState, useRef, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
 import { Icon, ButtonGroup, Button, Tooltip } from '@ohif/ui';
+import useOnClickOutside from '../../utils/useOnClickOutside';
 
 const classes = {
   infoHeader: 'text-base text-primary-light',
@@ -50,6 +51,23 @@ const ViewportActionBar = ({
   } = patientInformation;
 
   const onPatientInfoClick = () => setShowPatientInfo(!showPatientInfo);
+  const closePatientInfo = () => setShowPatientInfo(false);
+
+  const showPatientInfoRef = useRef(null);
+  const clickOutsideListener = useOnClickOutside(
+    showPatientInfoRef,
+    closePatientInfo
+  );
+
+  useEffect(() => {
+    if (showPatientInfo) {
+      clickOutsideListener.add();
+    } else {
+      clickOutsideListener.remove();
+    }
+
+    return () => clickOutsideListener.remove();
+  }, [clickOutsideListener, showPatientInfo]);
 
   const renderIconStatus = () => {
     if (modality === 'SR') {
@@ -188,6 +206,7 @@ const ViewportActionBar = ({
       )}
       <div className="flex ml-4 mr-2" onClick={onPatientInfoClick}>
         <PatientInfo
+          showPatientInfoRef={showPatientInfoRef}
           isOpen={showPatientInfo}
           patientName={patientName}
           patientSex={patientSex}
@@ -240,82 +259,85 @@ function PatientInfo({
   spacing,
   scanner,
   isOpen,
+  showPatientInfoRef,
 }) {
   return (
-    <Tooltip
-      isSticky
-      isDisabled={!isOpen}
-      position="bottom-right"
-      content={
-        isOpen && (
-          <div className="flex py-2">
-            <div className="flex pt-1">
-              <Icon name="info-link" className="w-4 text-primary-main" />
-            </div>
-            <div className="flex flex-col ml-2">
-              <span className="text-base font-bold text-white">
-                {patientName}
-              </span>
-              <div className="flex pb-4 mt-4 mb-4 border-b border-secondary-main">
-                <div className={classnames(classes.firstRow)}>
-                  <span className={classnames(classes.infoHeader)}>Sex</span>
-                  <span className={classnames(classes.infoText)}>
-                    {patientSex}
-                  </span>
-                </div>
-                <div className={classnames(classes.row)}>
-                  <span className={classnames(classes.infoHeader)}>Age</span>
-                  <span className={classnames(classes.infoText)}>
-                    {patientAge}
-                  </span>
-                </div>
-                <div className={classnames(classes.row)}>
-                  <span className={classnames(classes.infoHeader)}>MRN</span>
-                  <span className={classnames(classes.infoText)}>{MRN}</span>
-                </div>
+    <div ref={showPatientInfoRef}>
+      <Tooltip
+        isSticky
+        isDisabled={!isOpen}
+        position="bottom-right"
+        content={
+          isOpen && (
+            <div className="flex py-2">
+              <div className="flex pt-1">
+                <Icon name="info-link" className="w-4 text-primary-main" />
               </div>
-              <div className="flex">
-                <div className={classnames(classes.firstRow)}>
-                  <span className={classnames(classes.infoHeader)}>
-                    Thickness
-                  </span>
-                  <span className={classnames(classes.infoText)}>
-                    {thickness ? thickness : 'N/A'}
-                  </span>
+              <div className="flex flex-col ml-2">
+                <span className="text-base font-bold text-white">
+                  {patientName}
+                </span>
+                <div className="flex pb-4 mt-4 mb-4 border-b border-secondary-main">
+                  <div className={classnames(classes.firstRow)}>
+                    <span className={classnames(classes.infoHeader)}>Sex</span>
+                    <span className={classnames(classes.infoText)}>
+                      {patientSex}
+                    </span>
+                  </div>
+                  <div className={classnames(classes.row)}>
+                    <span className={classnames(classes.infoHeader)}>Age</span>
+                    <span className={classnames(classes.infoText)}>
+                      {patientAge}
+                    </span>
+                  </div>
+                  <div className={classnames(classes.row)}>
+                    <span className={classnames(classes.infoHeader)}>MRN</span>
+                    <span className={classnames(classes.infoText)}>{MRN}</span>
+                  </div>
                 </div>
-                <div className={classnames(classes.row)}>
-                  <span className={classnames(classes.infoHeader)}>
-                    Spacing
-                  </span>
-                  <span className={classnames(classes.infoText)}>
-                    {spacing}
-                  </span>
-                </div>
-                <div className={classnames(classes.row)}>
-                  <span className={classnames(classes.infoHeader)}>
-                    Scanner
-                  </span>
-                  <span className={classnames(classes.infoText)}>
-                    {scanner}
-                  </span>
+                <div className="flex">
+                  <div className={classnames(classes.firstRow)}>
+                    <span className={classnames(classes.infoHeader)}>
+                      Thickness
+                    </span>
+                    <span className={classnames(classes.infoText)}>
+                      {thickness ? thickness : 'N/A'}
+                    </span>
+                  </div>
+                  <div className={classnames(classes.row)}>
+                    <span className={classnames(classes.infoHeader)}>
+                      Spacing
+                    </span>
+                    <span className={classnames(classes.infoText)}>
+                      {spacing}
+                    </span>
+                  </div>
+                  <div className={classnames(classes.row)}>
+                    <span className={classnames(classes.infoHeader)}>
+                      Scanner
+                    </span>
+                    <span className={classnames(classes.infoText)}>
+                      {scanner}
+                    </span>
+                  </div>
                 </div>
               </div>
             </div>
+          )
+        }
+      >
+        <div className="relative flex justify-end cursor-pointer">
+          <div className="relative">
+            <Icon name="profile" className="w-5 text-white" />
+            <Icon
+              name="info-link"
+              className="absolute w-5 text-white bg-black"
+              style={{ right: -7, bottom: -10 }}
+            />
           </div>
-        )
-      }
-    >
-      <div className="relative flex justify-end cursor-pointer">
-        <div className="relative">
-          <Icon name="profile" className="w-5 text-white" />
-          <Icon
-            name="info-link"
-            className="absolute w-5 text-white bg-black"
-            style={{ right: -7, bottom: -10 }}
-          />
         </div>
-      </div>
-    </Tooltip>
+      </Tooltip>
+    </div>
   );
 }
 

platform/ui/src/utils/blurHandlerListener.js

@@ -1,10 +0,0 @@
-export default element => {
-  const handleClickOutside = event => {
-    if (element.current && !element.current.contains(event.target)) {
-      element.current.blur();
-      document.removeEventListener('mousedown', handleClickOutside);
-    }
-  };
-
-  document.addEventListener('mousedown', handleClickOutside);
-};

platform/ui/src/utils/useOnClickOutside.js

@@ -0,0 +1,17 @@
+export default (element, onClickOutside) => {
+  const clickOutsideHandler = event => {
+    if (element.current && !element.current.contains(event.target)) {
+      onClickOutside();
+      window.removeEventListener('mousedown', clickOutsideHandler);
+    }
+  };
+
+  const add = () => window.addEventListener('mousedown', clickOutsideHandler);
+  const remove = () =>
+    window.removeEventListener('mousedown', clickOutsideHandler);
+
+  return {
+    add,
+    remove,
+  };
+};