fix: filterable multiselect search issue

carbon-design-system · Jun 10, 2024 · 05be270 · 05be270
1 parent 5663eaa
commit 05be270
Show file tree

Hide file tree

Showing 2 changed files with 45 additions and 5 deletions.
diff --git a/packages/react/src/components/MultiSelect/FilterableMultiSelect.tsx b/packages/react/src/components/MultiSelect/FilterableMultiSelect.tsx
@@ -448,7 +448,7 @@ const FilterableMultiSelect = React.forwardRef(function FilterableMultiSelect<
     if (changes.isOpen && !isOpen) {
       setTopItems(controlledSelectedItems);
     }
-
+    console.log(type);
     switch (type) {
       case InputKeyDownEnter:
         if (changes.selectedItem && changes.selectedItem.disabled !== true) {
@@ -465,6 +465,8 @@ const FilterableMultiSelect = React.forwardRef(function FilterableMultiSelect<
         return changes;
       case InputBlur:
       case InputKeyDownEscape:
+        setInputFocused(false);
+        setInputValue('');
         setIsOpen(false);
         return changes;
       case FunctionToggleMenu:
@@ -477,6 +479,7 @@ const FilterableMultiSelect = React.forwardRef(function FilterableMultiSelect<
         if (onInputValueChange) {
           onInputValueChange(changes.inputValue);
         }
+        console.log('valueee');
         setInputValue(changes.inputValue ?? '');
         setIsOpen(true);
         return changes;
@@ -548,6 +551,7 @@ const FilterableMultiSelect = React.forwardRef(function FilterableMultiSelect<
   });
 
   function clearInputValue(event?: KeyboardEvent | undefined) {
+    console.log('clear');
     const value = textInput.current?.value;
     if (value?.length === 1 || (event && match(event, keys.Escape))) {
       setInputValue('');
@@ -659,10 +663,6 @@ const FilterableMultiSelect = React.forwardRef(function FilterableMultiSelect<
         }
       },
       onFocus: () => setInputFocused(true),
-      onBlur() {
-        setInputFocused(false);
-        setInputValue('');
-      },
     })
   );
   const menuProps = getMenuProps({}, { suppressRefError: true });

diff --git a/packages/react/src/components/MultiSelect/MultiSelect.stories.js b/packages/react/src/components/MultiSelect/MultiSelect.stories.js
@@ -15,6 +15,7 @@ import MultiSelect from '.';
 import FilterableMultiSelect from './FilterableMultiSelect';
 import Button from '../Button';
 import ButtonSet from '../ButtonSet';
+import { Tabs, Tab, TabList, TabPanels, TabPanel } from '@carbon/react';
 
 export default {
   title: 'Components/MultiSelect',
@@ -273,6 +274,45 @@ export const Filterable = (args) => {
   );
 };
 
+export const Test = (args) => {
+  return (
+    <Tabs>
+      <TabList aria-label="List of tabs">
+        <Tab>Overview</Tab>
+      </TabList>
+
+      <TabPanels>
+        <TabPanel>
+          <FilterableMultiSelect
+            style={{ marginTop: '3rem' }}
+            key={'t1'}
+            helperText="INTABS"
+            label="label"
+            titleText={'Title'}
+            itemToString={(item) => item}
+            items={[
+              'AAAB1',
+              'AAAB2',
+              'AAAB3',
+              'AAAB4',
+              'AAAB5',
+              'AAAB6',
+              'AAAB7',
+              'AAAB8',
+              'AAAB9',
+              'AAABA',
+              'AAABB',
+              'AAABC',
+              'AAABD',
+              'AAABF',
+            ]}
+          />
+        </TabPanel>
+      </TabPanels>
+    </Tabs>
+  );
+};
+
 Filterable.argTypes = {
   onChange: {
     action: 'onChange',