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,6 +44,7 @@ const Thumbnail = ({
       role="button"
       tabIndex="0"
     >
+      <div ref={drag}>
         <div
           className={classnames(
             'flex flex-1 items-center justify-center rounded-md bg-black text-base text-white overflow-hidden mb-2 min-h-32',
@@ -69,6 +74,7 @@ const Thumbnail = ({
         </div>
         <div className="text-base text-white break-all">{description}</div>
       </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,6 +35,7 @@ const ThumbnailNoImage = ({
       role="button"
       tabIndex="0"
     >
+      <div ref={drag}>
         <div className="flex flex-col flex-1">
           <div className="flex flex-row items-center flex-1 mb-2">
             <Icon name="list-bullets" className="w-12 text-secondary-light" />
@@ -44,6 +49,7 @@ const ThumbnailNoImage = ({
           </div>
         </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);
+};