fix: focus issue in filterable multiselect (#16840)

* fix: focus issue in filterable multiselect * fix: added test cases and focus fixes * Update FilterableMultiSelect-test.js * Update FilterableMultiSelect-test.js * Update MultiSelect.stories.js * Update packages/react/src/components/MultiSelect/FilterableMultiSelect.tsx --------- Co-authored-by: Taylor Jones <tay1orjones@users.noreply.github.com>
carbon-design-system · Jun 26, 2024 · 8685f38 · 8685f38
1 parent caf4334
commit 8685f38
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 3 deletions.
diff --git 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
@@ -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(<FilterableMultiSelect {...mockProps} placeholder="test" />);
+    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(
       <FilterableMultiSelect {...mockProps} slug={<Slug />} />
     );