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((props const wrapperRef = useRef(); const itemsRefs = useRef>({}); const uuid = useId(id); - const [dropdownOpened, _setDropdownOpened] = useState(initiallyOpened); + const [dropdownOpened, setDropdownOpened] = useState(initiallyOpened); const [hovered, setHovered] = useState(-1); const [direction, setDirection] = useState('column'); const [_searchValue, handleSearchChange] = useUncontrolled({ @@ -247,12 +247,6 @@ export const MultiSelect = forwardRef((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((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((props if (hovered === filteredData.length - 1) { setHovered(filteredData.length - 2); } + if (filteredData.length === 1) { + setDropdownOpened(false); + } } } }; @@ -575,6 +568,11 @@ export const MultiSelect = forwardRef((props const shouldRenderDropdown = !readOnly && (filteredData.length > 0 ? dropdownOpened : dropdownOpened && !!nothingFound); + useDidUpdate(() => { + const handler = shouldRenderDropdown ? onDropdownOpen : onDropdownClose; + typeof handler === 'function' && handler(); + }, [shouldRenderDropdown]); + return ( ((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((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}