From 845a73846b5ff42b31fdea9d577a0b4f061da1c8 Mon Sep 17 00:00:00 2001
From: Sagar <sysagar07@gmail.com>
Date: Sun, 4 Feb 2024 23:31:29 +0530
Subject: [PATCH 1/2] fix: select options on scroll

---
 .../src/components/MultiSelect/MultiSelect.tsx     | 14 ++++++++++++++
 1 file changed, 14 insertions(+)

diff --git a/packages/fuselage/src/components/MultiSelect/MultiSelect.tsx b/packages/fuselage/src/components/MultiSelect/MultiSelect.tsx
index 1f178ef048..5512194381 100644
--- a/packages/fuselage/src/components/MultiSelect/MultiSelect.tsx
+++ b/packages/fuselage/src/components/MultiSelect/MultiSelect.tsx
@@ -149,6 +149,20 @@ export const MultiSelect = forwardRef(
       return show();
     });
 
+    useEffect(() => {
+      const handleWheel = (e: any) => {
+        if (visible === AnimatedVisibility.VISIBLE) {
+          e.preventDefault();
+        }
+      };
+
+      document.addEventListener('wheel', handleWheel, { passive: false });
+
+      return () => {
+        document.removeEventListener('wheel', handleWheel);
+      };
+    }, [visible]);
+
     return (
       <Box
         is='div'

From ab56c61223855b7e4e31fc06d01f134d77eb7135 Mon Sep 17 00:00:00 2001
From: Sagar <sysagar07@gmail.com>
Date: Sun, 4 Feb 2024 23:50:06 +0530
Subject: [PATCH 2/2] fix: collapse issue

---
 .../fuselage/src/components/MultiSelect/MultiSelect.tsx   | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/packages/fuselage/src/components/MultiSelect/MultiSelect.tsx b/packages/fuselage/src/components/MultiSelect/MultiSelect.tsx
index 5512194381..46e1bee3c6 100644
--- a/packages/fuselage/src/components/MultiSelect/MultiSelect.tsx
+++ b/packages/fuselage/src/components/MultiSelect/MultiSelect.tsx
@@ -80,6 +80,9 @@ export const MultiSelect = forwardRef(
     useEffect((): void => setInternalValue(value || []), [value]);
 
     const [currentOptionValue, setCurrentOption] = useState<SelectOption[0]>();
+    const [visibleOptions, setVisibleOptions] = useState(
+      AnimatedVisibility.HIDDEN
+    );
 
     const index = options.findIndex(
       (option) => getValue(option) === currentOptionValue
@@ -108,7 +111,6 @@ export const MultiSelect = forwardRef(
       }
       return [value, label];
     };
-
     const applyFilter = ([, option]: SelectOption) =>
       !filter || option.toLowerCase().includes(filter.toLowerCase());
 
@@ -142,10 +144,12 @@ export const MultiSelect = forwardRef(
     };
 
     const handleClick = useEffectEvent(() => {
-      if (visible === AnimatedVisibility.VISIBLE) {
+      if (visibleOptions === AnimatedVisibility.VISIBLE) {
+        setVisibleOptions(AnimatedVisibility.HIDDEN);
         return hide();
       }
       innerRef.current?.focus();
+      setVisibleOptions(AnimatedVisibility.VISIBLE);
       return show();
     });