fix(ComboBox): open menu on selected clear(carbon-design-system#11397)

pmweeks98 · Jun 3, 2022 · 482f26a · 482f26a
1 parent 864e94a
commit 482f26a
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 2 deletions.
diff --git a/packages/react/src/components/ComboBox/ComboBox-test.js b/packages/react/src/components/ComboBox/ComboBox-test.js
@@ -7,7 +7,7 @@
 
 import React from 'react';
 import { mount } from 'enzyme';
-import { render, screen, within } from '@testing-library/react';
+import { render, screen, within, fireEvent } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import {
   findListBoxNode,
@@ -110,6 +110,23 @@ describe('ComboBox', () => {
     });
   });
 
+  it('should clear the selectedItem when clicking on the clear option', () => {
+    render(<ComboBox {...mockProps} selectedItem={mockProps.items[0]} />);
+    expect(screen.getByRole('combobox').value).toEqual(
+      mockProps.items[0].label
+    );
+
+    fireEvent.click(screen.getByTitle('Clear selected item'));
+    expect(screen.getByRole('combobox').value).toEqual('');
+  });
+
+  it('should show listbox on selected item clear', () => {
+    render(<ComboBox {...mockProps} selectedItem={mockProps.items[0]} />);
+
+    fireEvent.click(screen.getByTitle('Clear selected item'));
+    expect(screen.getAllByRole('option').length).toBe(mockProps.items.length);
+  });
+
   describe('should display initially selected item found in `initialSelectedItem`', () => {
     it('using an object type for the `initialSelectedItem` prop', () => {
       const wrapper = mount(

diff --git a/packages/react/src/components/ComboBox/ComboBox.js b/packages/react/src/components/ComboBox/ComboBox.js
@@ -341,7 +341,10 @@ const ComboBox = React.forwardRef((props, ref) => {
                     clearSelection={clearSelection}
                     translateWithId={translateWithId}
                     disabled={disabled}
-                    onClearSelection={handleSelectionClear}
+                    onClearSelection={() => {
+                      toggleMenu();
+                      handleSelectionClear();
+                    }}
                   />
                 )}
                 <ListBoxTrigger