fix(FilterableMultiSelect): call onMenuChange when mouse click outside (

#17136)

* fix(FilterableMultiSelect): call onMenuChange when mouse click outside

This fixes an issue where a mouse click event outside of the menu
does not call the `onMenuChange` callback when the menu is open.

Fixes #16896

* docs(FilterableMultiSelect): add story action for `onMenuChange`

This adds an action recorder for `onMenuChange` in storybook.

---------

Co-authored-by: Taylor Jones <[email protected]>

packages/react/src/components/MultiSelect/FilterableMultiSelect.tsx

@@ -507,11 +507,12 @@ const FilterableMultiSelect = React.forwardRef(function FilterableMultiSelect<
     const nextIsOpen = forceIsOpen ?? !isOpen;
     setIsOpen(nextIsOpen);
     validateHighlightFocus();
-    if (onMenuChange) {
-      onMenuChange(nextIsOpen);
-    }
   }
 
+  useEffect(() => {
+    onMenuChange?.(isOpen);
+  }, [isOpen, onMenuChange]);
+
   const {
     getToggleButtonProps,
     getLabelProps,

packages/react/src/components/MultiSelect/MultiSelect.stories.js

@@ -306,6 +306,9 @@ Filterable.argTypes = {
   onChange: {
     action: 'onChange',
   },
+  onMenuChange: {
+    action: 'onMenuChange',
+  },
 };
 
 export const WithLayerMultiSelect = () => (

packages/react/src/components/MultiSelect/__tests__/FilterableMultiSelect-test.js

@@ -47,13 +47,36 @@ describe('FilterableMultiSelect', () => {
     expect(screen.getAllByRole('option').length).toBe(mockProps.items.length);
   });
 
+  it('should call `onMenuChange` when the user clicks on the combobox', async () => {
+    render(<FilterableMultiSelect {...mockProps} />);
+    await waitForPosition();
+
+    await userEvent.click(screen.getByRole('combobox'));
+    expect(mockProps.onMenuChange).toHaveBeenCalledWith(true);
+  });
+
+  it('should call `onMenuChange` when the user clicks on the screen', async () => {
+    render(<FilterableMultiSelect {...mockProps} open />);
+    await waitForPosition();
+
+    await userEvent.click(document.body);
+    expect(mockProps.onMenuChange).toHaveBeenCalledWith(false);
+  });
+
   it('should initially have the menu open when open prop is provided', async () => {
     render(<FilterableMultiSelect {...mockProps} open />);
     await waitForPosition();
 
     assertMenuOpen(mockProps);
   });
 
+  it('should call `onMenuChange` when open prop is provided', async () => {
+    render(<FilterableMultiSelect {...mockProps} open />);
+    await waitForPosition();
+
+    expect(mockProps.onMenuChange).toHaveBeenCalledWith(true);
+  });
+
   it('should open the menu with a down arrow', async () => {
     render(<FilterableMultiSelect {...mockProps} />);
     await waitForPosition();
@@ -64,6 +87,15 @@ describe('FilterableMultiSelect', () => {
     expect(screen.getAllByRole('option').length).toBe(mockProps.items.length);
   });
 
+  it('should call `onMenuChange` when the user types a down arrow', async () => {
+    render(<FilterableMultiSelect {...mockProps} />);
+    await waitForPosition();
+
+    const menuIconNode = findMenuIconNode();
+    await userEvent.type(menuIconNode, '{arrowdown}');
+    expect(mockProps.onMenuChange).toHaveBeenCalledWith(true);
+  });
+
   it('should let the user toggle the menu by the menu icon', async () => {
     render(<FilterableMultiSelect {...mockProps} />);
     await waitForPosition();
@@ -76,6 +108,17 @@ describe('FilterableMultiSelect', () => {
     assertMenuClosed();
   });
 
+  it('should call `onMenuChange` when the user toggles the menu by the menu icon', async () => {
+    render(<FilterableMultiSelect {...mockProps} />);
+    await waitForPosition();
+
+    await userEvent.click(findMenuIconNode());
+    expect(mockProps.onMenuChange).toHaveBeenCalledWith(true);
+
+    await userEvent.click(findMenuIconNode());
+    expect(mockProps.onMenuChange).toHaveBeenCalledWith(false);
+  });
+
   it('should not close the menu after a user makes a selection', async () => {
     render(<FilterableMultiSelect {...mockProps} />);
     await waitForPosition();