fix: the interaction bug of MenuBar in horizontal mode (#647)

* fix: the interaction bug of MenuBar in horizontal mode

* test: update unit test code

Author: kiwiwong

src/workbench/menuBar/__tests__/menubar.test.tsx

@@ -124,7 +124,7 @@ describe('Test MenuBar Component', () => {
         expect(mockFn).toBeCalled();
     });
 
-    test('Should support to execute the handleClickMenuBar method in HorizontalView', async () => {
+    test('Should support to hide the menu by clicking the menu item at the root', async () => {
         const { getByText } = render(
             <MenuBar
                 data={menuData}
@@ -153,6 +153,35 @@ describe('Test MenuBar Component', () => {
         document.elementsFromPoint = originalFunc;
     });
 
+    test('Should support to hide menu by clicking the menu item of the submenu', async () => {
+        const { getByText } = render(
+            <MenuBar
+                data={menuData}
+                onClick={TEST_FN}
+                mode={MenuBarMode.horizontal}
+            />
+        );
+        const elem = getByText(TEST_ID);
+        const liElem = elem.closest('li');
+        const elemArr = liElem ? [liElem] : [];
+        const spanElem = getByText(TEST_DATA);
+        const ulElem = spanElem.closest('ul');
+        const originalFunc = document.elementsFromPoint;
+        document.elementsFromPoint = jest.fn(() => elemArr);
+
+        fireEvent.click(elem);
+        await waitFor(() => {
+            expect(ulElem?.style.opacity).toBe('1');
+        });
+
+        fireEvent.click(spanElem);
+        await waitFor(() => {
+            expect(ulElem?.style.opacity).toBe('0');
+        });
+
+        document.elementsFromPoint = originalFunc;
+    });
+
     test('Should support to execute the clearAutoDisplay method in HorizontalView', async () => {
         const { getByText } = render(
             <MenuBar

src/workbench/menuBar/horizontalView.tsx

@@ -45,22 +45,32 @@ export function HorizontalView(props: IHorizontalViewProps) {
 
         const handleClickMenuBar = (e: MouseEvent) => {
             const isRootLiElem = checkIsRootLiElem(e);
-            if (!isRootLiElem) return;
-            if (autoDisplayMenu) {
-                e.preventDefault();
-                e.stopPropagation();
-                menuRef.current?.dispose?.();
+            const target = e.target as HTMLElement;
+
+            if (isRootLiElem) {
+                if (autoDisplayMenu) {
+                    menuRef.current?.dispose?.();
+                }
+                // Delay the execution of setAutoDisplayMenu to ensure that the menu can be displayed.
+                setTimeout(() => setAutoDisplayMenu(!autoDisplayMenu));
+            } else {
+                const liElem = target.closest('li');
+                const isNormalLiElem =
+                    liElem &&
+                    menuBarElem.contains(liElem) &&
+                    !liElem?.dataset.submenu;
+
+                if (!liElem || isNormalLiElem) {
+                    setAutoDisplayMenu(false);
+                }
             }
-            // Delay the execution of setAutoDisplayMenu to ensure that the menu can be displayed.
-            setTimeout(() => setAutoDisplayMenu(!autoDisplayMenu));
         };
 
         const clearAutoDisplay = (e: MouseEvent) => {
             if (!autoDisplayMenu) return;
-            const isRootLiElem = checkIsRootLiElem(e);
+
             const target = e.target as HTMLElement;
-            const liElem = target.closest('li');
-            if (!isRootLiElem && !liElem?.dataset.submenu) {
+            if (!menuBarElem.contains(target)) {
                 setAutoDisplayMenu(false);
             }
         };