Fixed component paginatedMultiSelectFiltered dropdown close issue

RocketChat · Feb 7, 2024 · 2ecccff · 2ecccff
1 parent 8b8d43b
commit 2ecccff
Showing 1 changed file with 15 additions and 9 deletions.
diff --git a/packages/fuselage/src/components/PaginatedSelect/PaginatedMultiSelect.tsx b/packages/fuselage/src/components/PaginatedSelect/PaginatedMultiSelect.tsx
@@ -69,18 +69,24 @@ const PaginatedMultiSelect = ({
   const [visible, hide, show] = useVisible();
 
   const ref = useRef<HTMLInputElement>(null);
+
   const { ref: containerRef, borderBoxSize } = useResizeObserver();
 
-  const handleClick = useEffectEvent(() => {
-    if (visible === AnimatedVisibility.VISIBLE) {
-      return hide();
-    }
-    if (ref && ref.current) {
-      ref.current.focus();
-      return show();
+  const handleOnMouseDown = useEffectEvent((e) => {
+    const isClickOnChip = e.target.closest('.rcx-chip');
+    if (!isClickOnChip) {
+      visible === AnimatedVisibility.VISIBLE ? hide() : show();
     }
   });
 
+  const handleBlur = useEffectEvent(() => {
+    visible === AnimatedVisibility.VISIBLE && hide();
+  });
+
+  const handleClick = useEffectEvent(() => {
+    ref && ref.current && ref.current.focus();
+  });
+
   const addOption = (value: unknown) => {
     const option = options.find((opt) => opt.value === value);
     if (!option) {
@@ -114,6 +120,7 @@ const PaginatedMultiSelect = ({
       rcx-select
       className={[error && 'invalid', disabled && 'disabled']}
       ref={containerRef}
+      onMouseDown={handleOnMouseDown}
       onClick={handleClick}
       disabled={disabled}
       {...props}
@@ -135,8 +142,7 @@ const PaginatedMultiSelect = ({
                     disabled={disabled}
                     ref={ref}
                     aria-haspopup='listbox'
-                    onClick={show}
-                    onBlur={hide}
+                    onBlur={handleBlur}
                     order={1}
                     rcx-input-box--undecorated
                     children={placeholder ?? null}