fix: popover closing issue when clicked on overflow menu (#16792)

* fix: popover closing issue when clicked on overflow menu * Update packages/react/src/components/OverflowMenu/OverflowMenu-test.js * Update OverflowMenu-test.js * Update OverflowMenu-test.js --------- Co-authored-by: Taylor Jones <tay1orjones@users.noreply.github.com>
carbon-design-system · Jun 26, 2024 · 697684e · 697684e
1 parent 3636b9f
commit 697684e
Show file tree

Hide file tree

Showing 3 changed files with 88 additions and 2 deletions.
diff --git a/packages/react/src/components/OverflowMenu/OverflowMenu-test.js b/packages/react/src/components/OverflowMenu/OverflowMenu-test.js
@@ -10,7 +10,7 @@ import OverflowMenu from './OverflowMenu';
 import OverflowMenuItem from '../OverflowMenuItem';
 import { Filter } from '@carbon/icons-react';
 import userEvent from '@testing-library/user-event';
-import { render, screen } from '@testing-library/react';
+import { render, screen, fireEvent } from '@testing-library/react';
 
 describe('OverflowMenu', () => {
   describe('Renders as expected', () => {
@@ -171,5 +171,29 @@ describe('OverflowMenu', () => {
         'true'
       );
     });
+
+    it('should call onClick handler only once per click', async () => {
+      const handleClick = jest.fn();
+
+      render(
+        <OverflowMenu
+          open
+          aria-label="Overflow menu"
+          className="extra-class"
+          onClick={handleClick}>
+          <OverflowMenuItem className="test-child" itemText="one" />
+          <OverflowMenuItem className="test-child" itemText="two" />
+        </OverflowMenu>
+      );
+
+      // Find the OverflowMenu button
+      const button = screen.getByRole('button');
+
+      // Click the OverflowMenu button
+      await userEvent.click(button);
+
+      // Check that the click handler was called only once
+      expect(handleClick).toHaveBeenCalledTimes(1);
+    });
   });
 });
diff --git a/packages/react/src/components/OverflowMenu/OverflowMenu.tsx b/packages/react/src/components/OverflowMenu/OverflowMenu.tsx
@@ -439,7 +439,6 @@ class OverflowMenu extends React.Component<
   handleClick = (evt) => {
     const { onClick = noopFn } = this.props;
     this.setState({ click: true });
-    evt.stopPropagation();
     if (!this._menuBody || !this._menuBody.contains(evt.target)) {
       this.setState({ open: !this.state.open });
       onClick(evt);

diff --git a/packages/react/src/components/Popover/Popover.stories.js b/packages/react/src/components/Popover/Popover.stories.js
@@ -15,6 +15,8 @@ import { default as Checkbox } from '../Checkbox';
 import mdx from './Popover.mdx';
 import { Settings } from '@carbon/icons-react';
 import { keys, match } from '../../internal/keyboard';
+import OverflowMenu from '../OverflowMenu/OverflowMenu';
+import OverflowMenuItem from '../OverflowMenuItem';
 
 const prefix = 'cds';
 
@@ -267,6 +269,67 @@ export const ExperimentalAutoAlign = () => {
     </div>
   );
 };
+export const Test = () => {
+  const [open, setOpen] = useState();
+  const align = document?.dir === 'rtl' ? 'bottom-right' : 'bottom-left';
+  const alignTwo = document?.dir === 'rtl' ? 'bottom-left' : 'bottom-right';
+  return (
+    <div style={{ display: 'flex', gap: '8rem' }}>
+      <OverflowMenu
+        flipped={document?.dir === 'rtl'}
+        aria-label="overflow-menu">
+        <OverflowMenuItem itemText="Stop app" />
+        <OverflowMenuItem itemText="Restart app" />
+        <OverflowMenuItem itemText="Rename app" />
+        <OverflowMenuItem itemText="Clone and move app" disabled requireTitle />
+        <OverflowMenuItem itemText="Edit routes and access" requireTitle />
+        <OverflowMenuItem hasDivider isDelete itemText="Delete app" />
+      </OverflowMenu>
+
+      <Popover
+        align={align}
+        open={open}
+        onKeyDown={(evt) => {
+          if (match(evt, keys.Escape)) {
+            setOpen(false);
+          }
+        }}
+        isTabTip
+        onRequestClose={() => setOpen(false)}>
+        <button
+          aria-label="Settings"
+          type="button"
+          aria-expanded={open}
+          onClick={() => {
+            setOpen(!open);
+          }}>
+          <Settings />
+        </button>
+        <PopoverContent className="p-3">
+          <RadioButtonGroup
+            style={{ alignItems: 'flex-start', flexDirection: 'column' }}
+            legendText="Row height"
+            name="radio-button-group"
+            defaultSelected="small">
+            <RadioButton labelText="Small" value="small" id="radio-small" />
+            <RadioButton labelText="Large" value="large" id="radio-large" />
+          </RadioButtonGroup>
+          <hr />
+          <fieldset className={`cds--fieldset`}>
+            <legend className={`cds--label`}>Edit columns</legend>
+            <Checkbox defaultChecked labelText="Name" id="checkbox-label-1" />
+            <Checkbox defaultChecked labelText="Type" id="checkbox-label-2" />
+            <Checkbox
+              defaultChecked
+              labelText="Location"
+              id="checkbox-label-3"
+            />
+          </fieldset>
+        </PopoverContent>
+      </Popover>
+    </div>
+  );
+};
 
 export const TabTipExperimentalAutoAlign = () => {
   const [open, setOpen] = useState(true);