From d8be6085b285994bbcc25ce77091b1bc55c5babb Mon Sep 17 00:00:00 2001
From: Tim <tymmesyde@gmail.com>
Date: Wed, 19 Mar 2025 19:30:38 +0100
Subject: [PATCH] refactor: remove unrelated changes

---
 src/common/useOutsideClick.ts                 | 20 ++++++++++---------
 .../MultiselectMenu/Dropdown/Dropdown.tsx     |  2 +-
 .../MultiselectMenu/MultiselectMenu.tsx       |  6 ++----
 3 files changed, 14 insertions(+), 14 deletions(-)

diff --git a/src/common/useOutsideClick.ts b/src/common/useOutsideClick.ts
index 618803e3e..182cf8e37 100644
--- a/src/common/useOutsideClick.ts
+++ b/src/common/useOutsideClick.ts
@@ -1,25 +1,27 @@
 // Copyright (C) 2017-2024 Smart code 203358507
 
-import { RefObject, useEffect } from 'react';
+import { useEffect, useRef } from 'react';
+
+const useOutsideClick = (callback: () => void) => {
+    const ref = useRef<HTMLDivElement>(null);
 
-const useOutsideClick = (ref: RefObject<HTMLDivElement>, callback: () => void) => {
     useEffect(() => {
-        if (!ref?.current) return;
-
         const handleClickOutside = (event: MouseEvent | TouchEvent) => {
             if (ref.current && !ref.current.contains(event.target as Node)) {
                 callback();
             }
         };
 
-        document.addEventListener('mousedown', handleClickOutside, true);
-        document.addEventListener('touchstart', handleClickOutside, true);
+        document.addEventListener('mouseup', handleClickOutside);
+        document.addEventListener('touchend', handleClickOutside);
 
         return () => {
-            document.removeEventListener('mousedown', handleClickOutside);
-            document.removeEventListener('touchstart', handleClickOutside);
+            document.removeEventListener('mouseup', handleClickOutside);
+            document.removeEventListener('touchend', handleClickOutside);
         };
-    }, [ref, callback]);
+    }, [callback]);
+
+    return ref;
 };
 
 export default useOutsideClick;
diff --git a/src/components/MultiselectMenu/Dropdown/Dropdown.tsx b/src/components/MultiselectMenu/Dropdown/Dropdown.tsx
index 438ced13c..3da75619b 100644
--- a/src/components/MultiselectMenu/Dropdown/Dropdown.tsx
+++ b/src/components/MultiselectMenu/Dropdown/Dropdown.tsx
@@ -63,7 +63,7 @@ const Dropdown = ({ level, setLevel, options, onSelect, selectedOption, menuOpen
                 .filter((option: MultiselectMenuOption) => !option.hidden)
                 .map((option: MultiselectMenuOption) => (
                     <Option
-                        key={option.value}
+                        key={option.id}
                         ref={handleSetOptionRef(option.value)}
                         option={option}
                         onSelect={onSelect}
diff --git a/src/components/MultiselectMenu/MultiselectMenu.tsx b/src/components/MultiselectMenu/MultiselectMenu.tsx
index e3fbffcf4..35be107c9 100644
--- a/src/components/MultiselectMenu/MultiselectMenu.tsx
+++ b/src/components/MultiselectMenu/MultiselectMenu.tsx
@@ -1,6 +1,6 @@
 // Copyright (C) 2017-2024 Smart code 203358507
 
-import React, { useRef } from 'react';
+import React from 'react';
 import { Button } from 'stremio/components';
 import useBinaryState from 'stremio/common/useBinaryState';
 import Dropdown from './Dropdown';
@@ -19,15 +19,13 @@ type Props = {
 
 const MultiselectMenu = ({ className, title, options, selectedOption, onSelect }: Props) => {
     const [menuOpen, , closeMenu, toggleMenu] = useBinaryState(false);
-    const multiselectMenuRef = useRef(null);
+    const multiselectMenuRef = useOutsideClick(() => closeMenu());
     const [level, setLevel] = React.useState<number>(0);
 
     const onOptionSelect = (value: number) => {
         level ? setLevel(level + 1) : onSelect(value), closeMenu();
     };
 
-    useOutsideClick(multiselectMenuRef, closeMenu);
-
     return (
         <div className={classNames(styles['multiselect-menu'], className)} ref={multiselectMenuRef}>
             <Button