diff --git a/packages/react/src/components/MultiSelect/FilterableMultiSelect.tsx b/packages/react/src/components/MultiSelect/FilterableMultiSelect.tsx index 66d2ebebeafe..6b6bd8f25038 100644 --- a/packages/react/src/components/MultiSelect/FilterableMultiSelect.tsx +++ b/packages/react/src/components/MultiSelect/FilterableMultiSelect.tsx @@ -518,8 +518,6 @@ const FilterableMultiSelect = React.forwardRef(function FilterableMultiSelect< return changes; case InputBlur: case InputKeyDownEscape: - setInputFocused(false); - setInputValue(''); setIsOpen(false); return changes; case FunctionToggleMenu: @@ -714,6 +712,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 433debc08b1d..a9f02f2329a0 100644 --- a/packages/react/src/components/MultiSelect/__tests__/FilterableMultiSelect-test.js +++ b/packages/react/src/components/MultiSelect/__tests__/FilterableMultiSelect-test.js @@ -170,6 +170,20 @@ describe('FilterableMultiSelect', () => { expect(screen.getByPlaceholderText('test')).toHaveDisplayValue(3); }); + 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( } />