diff --git a/packages/react/src/components/OverflowMenu/OverflowMenu-test.js b/packages/react/src/components/OverflowMenu/OverflowMenu-test.js index 46eec3e5834d..daa44bb499d1 100644 --- 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( + + + + + ); + + // 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 index 157a976655de..b6ee30ccddb3 100644 --- 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 index 1285cf930f7a..f32b32e60068 100644 --- 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 = () => { ); }; +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 ( +
+ + + + + + + + + + { + if (match(evt, keys.Escape)) { + setOpen(false); + } + }} + isTabTip + onRequestClose={() => setOpen(false)}> + + + + + + +
+
+ Edit columns + + + +
+
+
+
+ ); +}; export const TabTipExperimentalAutoAlign = () => { const [open, setOpen] = useState(true);