Merge pull request #80 from js-tool-pack/fix_#79

fix(components/dropdown): 修复 Dropdown 在鼠标右击启动的情况下，点击选项关闭窗体后无法再次鼠标右击开启
js-tool-pack · Dec 13, 2023 · 16b1f73 · 16b1f73
2 parents 0c36844 + 3c53e8e
commit 16b1f73
Show file tree

Hide file tree

Showing 2 changed files with 50 additions and 3 deletions.
diff --git 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(
+      <Dropdown trigger="contextmenu" options={options}>
+        <div>foo bar</div>
+      </Dropdown>,
+    );
+
+    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
@@ -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<PopoverProps> = (props) => {
-  const { onVisibleChange, trigger: _, children, ...rest } = props;
+  const { onVisibleChange, trigger: _, children, visible, ...rest } = props;
   const triggerRef = useRef<HTMLDivElement>(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<PopoverProps> = (props) => {
         children.props.children,
       )}
       {createPortal(
-        <Popover {...rest} onVisibleChange={_onVisibleChange} trigger="click">
+        <Popover
+          {...rest}
+          onVisibleChange={_onVisibleChange}
+          visible={visible}
+          trigger="click"
+        >
           <div
             className={getClassNames(
               `${rootClass}__contextmenu_trigger`,