[@mantine/core] Select: Fix incorrect dropdown opened state when inpu…

…t is clicked (#2605) * fix dropdown flicker and dropdown handler being called * Select: close dropdown on click
mantinedev · Oct 3, 2022 · 92cb3c4 · 92cb3c4
1 parent 6c8a8b1
commit 92cb3c4
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 20 deletions.
diff --git 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}

diff --git a/src/mantine-core/src/Select/Select.tsx b/src/mantine-core/src/Select/Select.tsx
@@ -526,15 +526,9 @@ export const Select = forwardRef<HTMLInputElement, SelectProps>((props, ref) =>
 
   const handleInputClick = () => {
     if (!readOnly) {
-      let dropdownOpen = true;
+      setDropdownOpened(!dropdownOpened);
 
-      if (!searchable) {
-        dropdownOpen = !dropdownOpened;
-      }
-
-      setDropdownOpened(dropdownOpen);
-
-      if (_value && dropdownOpen) {
+      if (_value && !dropdownOpened) {
         setHovered(selectedItemIndex);
         scrollSelectedItemIntoView();
       }
@@ -588,7 +582,7 @@ export const Select = forwardRef<HTMLInputElement, SelectProps>((props, ref) =>
               aria-autocomplete="list"
               aria-controls={shouldShowDropdown ? `${inputProps.id}-items` : null}
               aria-activedescendant={hovered >= 0 ? `${inputProps.id}-${hovered}` : null}
-              onClick={handleInputClick}
+              onMouseDown={handleInputClick}
               onBlur={handleInputBlur}
               onFocus={handleInputFocus}
               readOnly={!searchable || readOnly}