feature: handle outside click

src/common/MultiselectMenu/MultiselectMenu.tsx

@@ -7,6 +7,7 @@ import Dropdown from './Dropdown';
 import classNames from 'classnames';
 import Icon from '@stremio/stremio-icons/react';
 import styles from './MultiselectMenu.less';
+import useOutsideClick from 'stremio/common/useOutsideClick';
 
 type Props = {
     className?: string,
@@ -18,7 +19,7 @@ type Props = {
 
 const MultiselectMenu = ({ className, title, options, selectedOption, onSelect }: Props) => {
     const [menuOpen, , closeMenu, toggleMenu] = useBinaryState(false);
-    const multiselectMenuRef = React.useRef<HTMLDivElement>(null);
+    const multiselectMenuRef = useOutsideClick(() => closeMenu());
     const [level, setLevel] = React.useState<number>(0);
 
     const onOptionSelect = (event: any) => {

src/common/useOutsideClick.ts

@@ -0,0 +1,25 @@
+import { useEffect, useRef } from 'react';
+
+const useOutsideClick = (callback: () => void) => {
+    const ref = useRef<HTMLDivElement>(null);
+
+    useEffect(() => {
+        const handleClickOutside = (event: MouseEvent | TouchEvent) => {
+            if (ref.current && !ref.current.contains(event.target as Node)) {
+                callback();
+            }
+        };
+
+        document.addEventListener('mouseup', handleClickOutside);
+        document.addEventListener('touchend', handleClickOutside);
+
+        return () => {
+            document.removeEventListener('mouseup', handleClickOutside);
+            document.removeEventListener('touchend', handleClickOutside);
+        };
+    }, [callback]);
+
+    return ref;
+};
+
+export default useOutsideClick;