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,8 +259,10 @@ function PatientInfo({
   spacing,
   scanner,
   isOpen,
+  showPatientInfoRef,
 }) {
   return (
+    <div ref={showPatientInfoRef}>
       <Tooltip
         isSticky
         isDisabled={!isOpen}
@@ -316,6 +337,7 @@ function PatientInfo({
           </div>
         </div>
       </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,
+  };
+};