[@mantine/core] MultiSelect: Fix selectFirstOptionOnChange prop not…

… working (#4997) * [@mantine/core] Implement selectFirstOptionOnChange for MultiSelect * [@mantine/core] Fix MultiSelect nothingFoundMessage * Prettier formatting --------- Co-authored-by: Jaden Gregory <[email protected]>
mantinedev · Oct 12, 2023 · 66fe076 · 66fe076
1 parent 07d85c5
commit 66fe076
Showing 1 changed file with 13 additions and 6 deletions.
diff --git a/src/mantine-core/src/components/MultiSelect/MultiSelect.tsx b/src/mantine-core/src/components/MultiSelect/MultiSelect.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import { useId, useUncontrolled } from '@mantine/hooks';
 import {
   BoxProps,
@@ -236,6 +236,12 @@ export const MultiSelect = factory<MultiSelectFactory>((_props, ref) => {
     </Pill>
   ));
 
+  useEffect(() => {
+    if (selectFirstOptionOnChange) {
+      combobox.selectFirstOption();
+    }
+  }, [selectFirstOptionOnChange, _value]);
+
   const clearButton = clearable && _value.length > 0 && !disabled && !readOnly && (
     <Combobox.ClearButton
       size={size as string}
@@ -247,6 +253,8 @@ export const MultiSelect = factory<MultiSelectFactory>((_props, ref) => {
     />
   );
 
+  const filteredData = filterPickedValues({ data: parsedData, value: _value });
+
   return (
     <>
       <Combobox
@@ -335,6 +343,7 @@ export const MultiSelect = factory<MultiSelectFactory>((_props, ref) => {
                   onChange={(event) => {
                     setSearchValue(event.currentTarget.value);
                     searchable && combobox.openDropdown();
+                    selectFirstOptionOnChange && combobox.selectFirstOption();
                   }}
                   disabled={disabled}
                   readOnly={readOnly || !searchable}
@@ -346,17 +355,15 @@ export const MultiSelect = factory<MultiSelectFactory>((_props, ref) => {
         </Combobox.DropdownTarget>
 
         <OptionsDropdown
-          data={
-            hidePickedOptions ? filterPickedValues({ data: parsedData, value: _value }) : parsedData
-          }
+          data={hidePickedOptions ? filteredData : parsedData}
           hidden={readOnly || disabled}
           filter={filter}
           search={_searchValue}
           limit={limit}
           hiddenWhenEmpty={
-            hidePickedOptions ||
+            !searchable ||
             !nothingFoundMessage ||
-            (!searchable && _searchValue.trim().length !== 0)
+            (hidePickedOptions && filteredData.length === 0 && _searchValue.trim().length === 0)
           }
           withScrollArea={withScrollArea}
           maxDropdownHeight={maxDropdownHeight}