diff --git a/packages/react/src/components/MultiSelect/FilterableMultiSelect.tsx b/packages/react/src/components/MultiSelect/FilterableMultiSelect.tsx index 785471470d62..350417650920 100644 --- 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 index 8381bdd3a1cc..08a55ba5c7ef 100644 --- 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 ( + + + Overview + + + + + item} + items={[ + 'AAAB1', + 'AAAB2', + 'AAAB3', + 'AAAB4', + 'AAAB5', + 'AAAB6', + 'AAAB7', + 'AAAB8', + 'AAAB9', + 'AAABA', + 'AAABB', + 'AAABC', + 'AAABD', + 'AAABF', + ]} + /> + + + + ); +}; + Filterable.argTypes = { onChange: { action: 'onChange',