diff --git a/packages/components/src/dropdown/__tests__/Dropdown.test.tsx b/packages/components/src/dropdown/__tests__/Dropdown.test.tsx index ed0174a1..f0de2378 100644 --- a/packages/components/src/dropdown/__tests__/Dropdown.test.tsx +++ b/packages/components/src/dropdown/__tests__/Dropdown.test.tsx @@ -207,4 +207,42 @@ describe('Dropdown', () => { expect(onSelect).not.toBeCalled(); expect(balloon).toMatchSnapshot(); }); + it('修复测试 在鼠标右击启动的情况下,点击选项关闭窗体后无法再次鼠标右击开启 #79', () => { + jest.useFakeTimers(); + const options: DropdownOptionsItem[] = [ + { label: '黄金蛋炒饭', key: '1' }, + { label: '扬州炒饭', key: '2' }, + ]; + const { container } = render( + +
foo bar
+
, + ); + + expect(getBalloon()).toBeNull(); + + // 第一步:开启 + fireEvent.contextMenu(container.firstChild!); + act(() => jest.advanceTimersByTime(500)); + act(() => jest.advanceTimersByTime(500)); + expect(getBalloon()).not.toBeNull(); + expect(getBalloon()).not.toHaveClass('t-transition--invisible'); + + // 第二步:点击选项 + fireEvent.click(document.querySelector('.t-dropdown-option')!); + act(() => jest.advanceTimersByTime(500)); + act(() => jest.advanceTimersByTime(500)); + expect(getBalloon()).toHaveClass('t-transition--invisible'); + + // 第三步:再次开启 + fireEvent.contextMenu(container.firstChild!); + act(() => jest.advanceTimersByTime(500)); + act(() => jest.advanceTimersByTime(500)); + // bug 所在 + expect(getBalloon()).not.toHaveClass('t-transition--invisible'); + + function getBalloon(): HTMLDivElement | null { + return document.querySelector('.t-word-balloon'); + } + }); }); diff --git a/packages/components/src/popover/Contextmenu.tsx b/packages/components/src/popover/Contextmenu.tsx index 7397deb0..499ac56d 100644 --- a/packages/components/src/popover/Contextmenu.tsx +++ b/packages/components/src/popover/Contextmenu.tsx @@ -1,19 +1,23 @@ import { getComponentClass, useForceUpdate, useNextEffect } from '@pkg/shared'; import type { PopoverProps } from './popover.types'; import { getClassNames } from '@tool-pack/basic'; +import React, { useEffect, useRef } from 'react'; import { createPortal } from 'react-dom'; -import React, { useRef } from 'react'; import { Popover } from './Popover'; const rootClass = getComponentClass('popover'); export const Contextmenu: React.FC = (props) => { - const { onVisibleChange, trigger: _, children, ...rest } = props; + const { onVisibleChange, trigger: _, children, visible, ...rest } = props; const triggerRef = useRef(null); const visibleRef = useRef(false); const nextEffect = useNextEffect(); const forceUpdate = useForceUpdate(); + useEffect(() => { + if (visible === false) visibleRef.current = false; + }, [visible]); + return ( <> {React.cloneElement( @@ -22,7 +26,12 @@ export const Contextmenu: React.FC = (props) => { children.props.children, )} {createPortal( - +