From f19bd9ee7f88ac9b276d218e1192f9ec6b5d942c Mon Sep 17 00:00:00 2001
From: Zishan Ahmad <zishan.barun@gmail.com>
Date: Tue, 16 Jan 2024 17:41:51 +0530
Subject: [PATCH] fixed drop down close issue of multiselect component

---
 .../components/MultiSelect/MultiSelect.tsx    | 24 ++++++++++++++-----
 1 file changed, 18 insertions(+), 6 deletions(-)

diff --git a/packages/fuselage/src/components/MultiSelect/MultiSelect.tsx b/packages/fuselage/src/components/MultiSelect/MultiSelect.tsx
index 1f178ef048..8e5e539fac 100644
--- a/packages/fuselage/src/components/MultiSelect/MultiSelect.tsx
+++ b/packages/fuselage/src/components/MultiSelect/MultiSelect.tsx
@@ -10,6 +10,8 @@ import type {
   ElementType,
   Ref,
   ReactNode,
+  FocusEventHandler,
+  MouseEventHandler,
 } from 'react';
 import React, { useState, useRef, useEffect, forwardRef } from 'react';
 
@@ -142,19 +144,29 @@ export const MultiSelect = forwardRef(
     };
 
     const handleClick = useEffectEvent(() => {
-      if (visible === AnimatedVisibility.VISIBLE) {
-        return hide();
-      }
       innerRef.current?.focus();
-      return show();
     });
 
+    const handleBlur: FocusEventHandler = useEffectEvent(() => {
+      visible === AnimatedVisibility.VISIBLE && hide();
+    });
+
+    const handleOnMouseDown = useEffectEvent((e) => {
+      const isClickOnChip = e.target.closest('.rcx-chip');
+      if (!isClickOnChip) {
+        visible === AnimatedVisibility.VISIBLE ? hide() : show();
+      }
+    });
+
+    const handleAnchorClick: MouseEventHandler = useEffectEvent(() => {});
+
     return (
       <Box
         is='div'
         rcx-select
         className={[error && 'invalid', disabled && 'disabled']}
         ref={containerRef}
+        onMouseDown={handleOnMouseDown}
         onClick={handleClick}
         disabled={disabled}
         {...props}
@@ -176,8 +188,8 @@ export const MultiSelect = forwardRef(
                       ref: anchorRef,
                       children: internalValue.length === 0 ? placeholder : null,
                       disabled: disabled ?? false,
-                      onClick: show,
-                      onBlur: hide,
+                      onClick: handleAnchorClick,
+                      onBlur: handleBlur,
                       onKeyDown: handleKeyDown,
                       onKeyUp: handleKeyUp,
                     })}