Remove bad implementation to close popup

apps/readest-app/src/components/Dropdown.tsx

@@ -1,6 +1,5 @@
 import clsx from 'clsx';
 import React, { useState, isValidElement, ReactElement } from 'react';
-import useOutsideClick from '@/hooks/useOutsideClick';
 
 interface DropdownProps {
   className?: string;
@@ -30,33 +29,30 @@ const Dropdown: React.FC<DropdownProps> = ({
     onToggle?.(isOpen);
   };
 
-  const handleBlur = (event: React.FocusEvent<HTMLDivElement>) => {
-    if (!dropdownRef.current?.contains(event.relatedTarget as Node)) {
-      setIsDropdownOpen(false);
-    }
-  };
-
-  const dropdownRef = useOutsideClick<HTMLDivElement>(() => setIsDropdownOpen(false));
   const childrenWithToggle = isValidElement(children)
     ? React.cloneElement(children, { setIsDropdownOpen })
     : children;
 
   return (
-    <div className={clsx('dropdown', className)} ref={dropdownRef}>
-      <div
-        tabIndex={-1}
-        onClick={toggleDropdown}
-        onBlur={handleBlur}
-        className={clsx(
-          'dropdown-toggle hover:bg-gray-300',
-          buttonClassName,
-          isOpen && 'bg-base-300',
-        )}
-      >
-        {toggleButton}
+    <>
+      {isOpen && (
+        <div className='fixed inset-0 bg-transparent' onClick={() => setIsDropdownOpen(false)} />
+      )}
+      <div className={clsx('dropdown', className)}>
+        <div
+          tabIndex={-1}
+          onClick={toggleDropdown}
+          className={clsx(
+            'dropdown-toggle hover:bg-gray-300',
+            buttonClassName,
+            isOpen && 'bg-base-300',
+          )}
+        >
+          {toggleButton}
+        </div>
+        {isOpen && childrenWithToggle}
       </div>
-      {isOpen && childrenWithToggle}
-    </div>
+    </>
   );
 };
 

apps/readest-app/src/hooks/useOutsideClick.ts

@@ -1,31 +0,0 @@
-import { useEffect, useRef } from 'react';
-
-function useOutsideClick<T extends HTMLElement>(callback: () => void) {
-  const ref = useRef<T | null>(null);
-
-  useEffect(() => {
-    const handleClickOutside = (event: MouseEvent | Event) => {
-      if (event instanceof MouseEvent) {
-        if (ref.current && !ref.current.contains(event.target as Node)) {
-          callback();
-        }
-      } else if (event instanceof MessageEvent) {
-        if (event.data && event.data.type === 'iframe-mousedown') {
-          callback();
-        }
-      }
-    };
-
-    window.addEventListener('mousedown', handleClickOutside);
-    window.addEventListener('message', handleClickOutside);
-
-    return () => {
-      window.removeEventListener('mousedown', handleClickOutside);
-      window.removeEventListener('message', handleClickOutside);
-    };
-  }, []);
-
-  return ref;
-}
-
-export default useOutsideClick;