diff --git a/packages/react/src/components/MultiSelect/FilterableMultiSelect.tsx b/packages/react/src/components/MultiSelect/FilterableMultiSelect.tsx index 482f5414b542..87806aa44f51 100644 --- a/packages/react/src/components/MultiSelect/FilterableMultiSelect.tsx +++ b/packages/react/src/components/MultiSelect/FilterableMultiSelect.tsx @@ -464,8 +464,6 @@ const FilterableMultiSelect = React.forwardRef(function FilterableMultiSelect< return changes; case InputBlur: case InputKeyDownEscape: - setInputFocused(false); - setInputValue(''); setIsOpen(false); return changes; case FunctionToggleMenu: @@ -660,6 +658,10 @@ const FilterableMultiSelect = React.forwardRef(function FilterableMultiSelect< } }, onFocus: () => setInputFocused(true), + onBlur: () => { + !isOpen && setInputFocused(false); + setInputValue(''); + }, }) ); const menuProps = getMenuProps({}, { suppressRefError: true }); diff --git a/packages/react/src/components/MultiSelect/__tests__/FilterableMultiSelect-test.js b/packages/react/src/components/MultiSelect/__tests__/FilterableMultiSelect-test.js index 9a4185a207cc..25bee6d3b931 100644 --- a/packages/react/src/components/MultiSelect/__tests__/FilterableMultiSelect-test.js +++ b/packages/react/src/components/MultiSelect/__tests__/FilterableMultiSelect-test.js @@ -151,7 +151,21 @@ describe('FilterableMultiSelect', () => { expect(screen.getByPlaceholderText('test')).toHaveDisplayValue(3); }); - it('should respect slug prop', () => { + it('should clear input value when clicking on cross button', async () => { + render(); + await openMenu(); + + await userEvent.type(screen.getByPlaceholderText('test'), '3'); + + const clearButton = screen.getByRole('button', { + name: 'Clear selected item', + }); + await userEvent.click(clearButton); + + expect(screen.getByPlaceholderText('test')).toHaveDisplayValue(''); + }); + + it('should respect slug prop', async () => { const { container } = render( } /> );