From 290971e0d212062f6e91ff4a847f5665284e723b Mon Sep 17 00:00:00 2001
From: achmurali <22786016+achmurali@users.noreply.github.com>
Date: Sun, 2 Oct 2022 17:54:18 +0530
Subject: [PATCH] fix dropdown flicker and dropdown handler being called

---
 .../src/MultiSelect/MultiSelect.tsx           | 20 +++++++++----------
 1 file changed, 9 insertions(+), 11 deletions(-)

diff --git a/src/mantine-core/src/MultiSelect/MultiSelect.tsx b/src/mantine-core/src/MultiSelect/MultiSelect.tsx
index 82e36307d35..6fecb912e86 100644
--- a/src/mantine-core/src/MultiSelect/MultiSelect.tsx
+++ b/src/mantine-core/src/MultiSelect/MultiSelect.tsx
@@ -226,7 +226,7 @@ export const MultiSelect = forwardRef<HTMLInputElement, MultiSelectProps>((props
   const wrapperRef = useRef<HTMLDivElement>();
   const itemsRefs = useRef<Record<string, HTMLDivElement>>({});
   const uuid = useId(id);
-  const [dropdownOpened, _setDropdownOpened] = useState(initiallyOpened);
+  const [dropdownOpened, setDropdownOpened] = useState(initiallyOpened);
   const [hovered, setHovered] = useState(-1);
   const [direction, setDirection] = useState<React.CSSProperties['flexDirection']>('column');
   const [_searchValue, handleSearchChange] = useUncontrolled({
@@ -247,12 +247,6 @@ export const MultiSelect = forwardRef<HTMLInputElement, MultiSelectProps>((props
   const isCreatable = creatable && typeof getCreateLabel === 'function';
   let createLabel = null;
 
-  const setDropdownOpened = (opened: boolean) => {
-    _setDropdownOpened(opened);
-    const handler = opened ? onDropdownOpen : onDropdownClose;
-    typeof handler === 'function' && handler();
-  };
-
   const formattedData = data.map((item) =>
     typeof item === 'string' ? { label: item, value: item } : item
   );
@@ -328,10 +322,6 @@ export const MultiSelect = forwardRef<HTMLInputElement, MultiSelectProps>((props
       valuesOverflow.current = true;
       setDropdownOpened(false);
     }
-
-    if (filteredData.length === 0) {
-      setDropdownOpened(false);
-    }
   }, [_value]);
 
   const handleItemSelect = (item: SelectItem) => {
@@ -361,6 +351,9 @@ export const MultiSelect = forwardRef<HTMLInputElement, MultiSelectProps>((props
         if (hovered === filteredData.length - 1) {
           setHovered(filteredData.length - 2);
         }
+        if (filteredData.length === 1) {
+          setDropdownOpened(false);
+        }
       }
     }
   };
@@ -575,6 +568,11 @@ export const MultiSelect = forwardRef<HTMLInputElement, MultiSelectProps>((props
   const shouldRenderDropdown =
     !readOnly && (filteredData.length > 0 ? dropdownOpened : dropdownOpened && !!nothingFound);
 
+  useDidUpdate(() => {
+    const handler = shouldRenderDropdown ? onDropdownOpen : onDropdownClose;
+    typeof handler === 'function' && handler();
+  }, [shouldRenderDropdown]);
+
   return (
     <Input.Wrapper
       required={required}