From 41d7c8a0f16e04c0cf80797ee1efd369d8ff351a Mon Sep 17 00:00:00 2001
From: "Timothy Z." <timothy@stremio.com>
Date: Thu, 25 Jul 2024 11:27:08 +0300
Subject: [PATCH] fix: onSelect

---
 src/common/MultiselectMenu/Dropdown/Dropdown.tsx      | 6 ++++--
 src/common/MultiselectMenu/Dropdown/Option/Option.tsx | 4 ++--
 src/common/MultiselectMenu/MultiselectMenu.tsx        | 7 ++++---
 3 files changed, 10 insertions(+), 7 deletions(-)

diff --git a/src/common/MultiselectMenu/Dropdown/Dropdown.tsx b/src/common/MultiselectMenu/Dropdown/Dropdown.tsx
index 1c09de925..74b88b3c0 100644
--- a/src/common/MultiselectMenu/Dropdown/Dropdown.tsx
+++ b/src/common/MultiselectMenu/Dropdown/Dropdown.tsx
@@ -14,11 +14,12 @@ type Props = {
     menuOpen: boolean | (() => void);
     level: number;
     setLevel: (level: number) => void;
-    onSelect: (option: MultiselectMenuOption) => void;
+    onSelect: (event: any) => void;
 };
 
 const Dropdown = ({ level, setLevel, options, onSelect, selectedOption, menuOpen }: Props) => {
     const { t } = useTranslation();
+
     const onBackButtonClick = () => {
         setLevel(level - 1);
     };
@@ -36,8 +37,9 @@ const Dropdown = ({ level, setLevel, options, onSelect, selectedOption, menuOpen
             {
                 options
                     .filter((option: MultiselectMenuOption) => !option.hidden)
-                    .map((option: MultiselectMenuOption) => (
+                    .map((option: MultiselectMenuOption, index) => (
                         <Option
+                            key={index}
                             option={option}
                             onSelect={onSelect}
                             selectedOption={selectedOption}
diff --git a/src/common/MultiselectMenu/Dropdown/Option/Option.tsx b/src/common/MultiselectMenu/Dropdown/Option/Option.tsx
index 7ade6dfa5..28a431b1f 100644
--- a/src/common/MultiselectMenu/Dropdown/Option/Option.tsx
+++ b/src/common/MultiselectMenu/Dropdown/Option/Option.tsx
@@ -9,7 +9,7 @@ import Icon from '@stremio/stremio-icons/react';
 type Props = {
     option: MultiselectMenuOption;
     selectedOption?: MultiselectMenuOption | null;
-    onSelect: (option: MultiselectMenuOption) => void;
+    onSelect: (value: string) => void;
 };
 
 const Option = ({ option, selectedOption, onSelect }: Props) => {
@@ -20,7 +20,7 @@ const Option = ({ option, selectedOption, onSelect }: Props) => {
         <Button
             className={classNames(styles['option'], { [styles['selected']]: selected })}
             key={option.id}
-            onClick={(event: any) => onSelect(event)}
+            onClick={() => onSelect(option.value)}
             aria-selected={selected}
         >
             <div className={styles['label']}>{ option.label }</div>
diff --git a/src/common/MultiselectMenu/MultiselectMenu.tsx b/src/common/MultiselectMenu/MultiselectMenu.tsx
index 5eb073eca..efaf6229f 100644
--- a/src/common/MultiselectMenu/MultiselectMenu.tsx
+++ b/src/common/MultiselectMenu/MultiselectMenu.tsx
@@ -13,7 +13,7 @@ type Props = {
     title?: string;
     options: MultiselectMenuOption[];
     selectedOption?: MultiselectMenuOption;
-    onSelect: () => void;
+    onSelect: (event: any) => void;
 };
 
 const MultiselectMenu = ({ className, title, options, selectedOption, onSelect }: Props) => {
@@ -21,8 +21,9 @@ const MultiselectMenu = ({ className, title, options, selectedOption, onSelect }
     const multiselectMenuRef = React.useRef<HTMLDivElement>(null);
     const [level, setLevel] = React.useState<number>(0);
 
-    const onOptionSelect = (option: MultiselectMenuOption) => {
-        option.level  ? setLevel(level + 1) : onSelect(), closeMenu();
+    const onOptionSelect = (event: any) => {
+        console.log(event.value);
+        level ? setLevel(level + 1) : onSelect(event), closeMenu();
     };
     
     return (