fix: remove focus if clicked outside thumbnail

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

@@ -1,9 +1,10 @@
-import React from 'react';
+import React, { useEffect, useRef } 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';
 
 /**
  *
@@ -29,9 +30,12 @@ const Thumbnail = ({
     },
   });
 
+  const thumbnailElement = useRef(null);
+
   return (
     <div
-      ref={drag}
+      onFocus={() => blurHandlerListener(thumbnailElement)}
+      ref={thumbnailElement}
       className={classnames(
         className,
         'flex flex-col flex-1 px-3 mb-8 cursor-pointer outline-none group'
@@ -40,34 +44,36 @@ const Thumbnail = ({
       role="button"
       tabIndex="0"
     >
-      <div
+      <div ref={drag}>
-        className={classnames(
+        <div
-          'flex flex-1 items-center justify-center rounded-md bg-black text-base text-white overflow-hidden mb-2 min-h-32',
+          className={classnames(
-          isActive
+            'flex flex-1 items-center justify-center rounded-md bg-black text-base text-white overflow-hidden mb-2 min-h-32',
-            ? 'border-2 border-primary-light'
+            isActive
-            : 'border border-secondary-light group-focus:border-blue-300 hover:border-blue-300'
+              ? 'border-2 border-primary-light'
-        )}
+              : 'border border-secondary-light group-focus:border-blue-300 hover:border-blue-300'
-      >
+          )}
-        {imageSrc ? (
+        >
-          <img
+          {imageSrc ? (
-            src={imageSrc}
+            <img
-            alt={imageAltText}
+              src={imageSrc}
-            className="object-none min-h-32"
+              alt={imageAltText}
-          />
+              className="object-none min-h-32"
-        ) : (
+            />
-          <div>{imageAltText}</div>
+          ) : (
-        )}
+            <div>{imageAltText}</div>
-      </div>
+          )}
-      <div className="flex flex-row items-center flex-1 text-base text-blue-300">
-        <div className="mr-4">
-          <span className="font-bold text-primary-main">{'S: '}</span>
-          {seriesNumber}
         </div>
-        <div className="flex flex-row items-center flex-1">
+        <div className="flex flex-row items-center flex-1 text-base text-blue-300">
-          <Icon name="group-layers" className="w-3 mr-2" /> {numInstances}
+          <div className="mr-4">
+            <span className="font-bold text-primary-main">{'S: '}</span>
+            {seriesNumber}
+          </div>
+          <div className="flex flex-row items-center flex-1">
+            <Icon name="group-layers" className="w-3 mr-2" /> {numInstances}
+          </div>
         </div>
+        <div className="text-base text-white break-all">{description}</div>
       </div>
-      <div className="text-base text-white break-all">{description}</div>
     </div>
   );
 };

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

@@ -1,9 +1,10 @@
-import React from 'react';
+import React, { useRef } from 'react';
 import classnames from 'classnames';
 import PropTypes from 'prop-types';
 import { useDrag } from 'react-dnd';
 
 import { Icon } from '@ohif/ui';
+import blurHandlerListener from '../../utils/blurHandlerListener';
 
 const ThumbnailNoImage = ({
   description,
@@ -20,9 +21,12 @@ const ThumbnailNoImage = ({
     },
   });
 
+  const thumbnailElement = useRef(null);
+
   return (
     <div
-      ref={drag}
+      ref={thumbnailElement}
+      onFocus={() => blurHandlerListener(thumbnailElement)}
       className={classnames(
         'flex flex-row flex-1 px-4 py-3 cursor-pointer outline-none border-transparent hover:border-blue-300 focus:border-blue-300 rounded',
         isActive ? 'border-2 border-primary-light' : 'border'
@@ -31,16 +35,18 @@ const ThumbnailNoImage = ({
       role="button"
       tabIndex="0"
     >
-      <div className="flex flex-col flex-1">
+      <div ref={drag}>
-        <div className="flex flex-row items-center flex-1 mb-2">
+        <div className="flex flex-col flex-1">
-          <Icon name="list-bullets" className="w-12 text-secondary-light" />
+          <div className="flex flex-row items-center flex-1 mb-2">
-          <div className="px-3 mr-4 text-lg text-white rounded-sm bg-primary-main">
+            <Icon name="list-bullets" className="w-12 text-secondary-light" />
-            {modality}
+            <div className="px-3 mr-4 text-lg text-white rounded-sm bg-primary-main">
+              {modality}
+            </div>
+            <span className="text-base text-blue-300">{seriesDate}</span>
+          </div>
+          <div className="ml-12 text-base text-white break-all">
+            {description}
           </div>
-          <span className="text-base text-blue-300">{seriesDate}</span>
-        </div>
-        <div className="ml-12 text-base text-white break-all">
-          {description}
         </div>
       </div>
     </div>

platform/ui/src/utils/blurHandlerListener.js

@@ -0,0 +1,10 @@
+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);
+};