refactor: folderTree'input support default contextmenu (#839)

* refactor: folderTree'input support default contextmenu

* test: update tests

src/components/contextMenu/index.tsx

@@ -23,14 +23,17 @@ export function useContextMenu(
     });
 
     const onContextMenu = (e: MouseEvent) => {
-        e.preventDefault();
-        contextView!.show(
-            {
-                x: e.clientX,
-                y: e.clientY,
-            },
-            render
-        );
+        // ONLY works over the anchor ele
+        if (e.target === e.currentTarget) {
+            e.preventDefault();
+            contextView!.show(
+                {
+                    x: e.clientX,
+                    y: e.clientY,
+                },
+                render
+            );
+        }
     };
 
     anchor.addEventListener('contextmenu', onContextMenu);

src/components/tree/index.tsx

@@ -180,7 +180,6 @@ const TreeView = ({
         e: React.MouseEvent<HTMLDivElement, MouseEvent>,
         info: ITreeNodeItemProps
     ) => {
-        e.preventDefault();
         e.stopPropagation();
         onRightClick?.(e, info);
     };

src/workbench/problems/__tests__/paneView.test.tsx

@@ -1,5 +1,10 @@
 import React from 'react';
-import { cleanup, fireEvent, render } from '@testing-library/react';
+import {
+    cleanup,
+    createEvent,
+    fireEvent,
+    render,
+} from '@testing-library/react';
 import '@testing-library/jest-dom';
 import ProblemsPaneView from '../paneView';
 import { MarkerSeverity } from 'mo/model';
@@ -113,4 +118,20 @@ describe('The PaneView Component', () => {
         );
         expect(tips).toBeInTheDocument();
     });
+
+    test('Should prevent default on contextMenu', () => {
+        const { container } = render(<ProblemsPaneView {...mockRootData} />);
+
+        const dom = container.querySelector(
+            `div[data-key="${mockProblemFile.id}"]`
+        );
+        expect(dom).toBeInTheDocument();
+
+        const myEvent = createEvent.contextMenu(dom!);
+        myEvent.preventDefault = jest.fn();
+
+        fireEvent(dom!, myEvent);
+
+        expect(myEvent.preventDefault as jest.Mock).toBeCalled();
+    });
 });

src/workbench/problems/paneView/index.tsx

@@ -71,6 +71,7 @@ function ProblemsPaneView(props: IProblems) {
                         );
                     }}
                     onSelect={onSelect}
+                    onRightClick={(e) => e.preventDefault()}
                 />
             </div>
         </Scrollbar>

src/workbench/sidebar/__tests__/searchPanel.test.tsx

@@ -1,5 +1,10 @@
 import React from 'react';
-import { cleanup, fireEvent, render } from '@testing-library/react';
+import {
+    cleanup,
+    createEvent,
+    fireEvent,
+    render,
+} from '@testing-library/react';
 import '@testing-library/jest-dom';
 import { expectFnCalled } from '@test/utils';
 import { SearchPanel } from '../search';
@@ -219,4 +224,26 @@ describe('The SearchPanel Component', () => {
 
         expect(getByTitle(resultTree[0].name)).toBeInTheDocument();
     });
+
+    test("Should prevent default on tree's contextMenu event handler", () => {
+        expectFnCalled((mockFn) => {
+            const { container } = render(
+                <SearchPanel
+                    value="test"
+                    result={mockResult}
+                    getSearchIndex={() => 0}
+                />
+            );
+
+            const target = mockResult[1];
+            const dom = container.querySelector(
+                `.${defaultTreeNodeClassName}[data-key="${target.id}"]`
+            )!;
+
+            const myEvent = createEvent.contextMenu(dom!);
+            myEvent.preventDefault = mockFn;
+
+            fireEvent(dom!, myEvent);
+        });
+    });
 });

src/workbench/sidebar/explore/folderTree.tsx

@@ -2,7 +2,7 @@ import 'reflect-metadata';
 import React, { memo, useRef, useEffect, useLayoutEffect } from 'react';
 import { IFolderTree, IFolderTreeNodeProps } from 'mo/model';
 import { select, getEventPosition } from 'mo/common/dom';
-import Tree from 'mo/components/tree';
+import Tree, { ITreeProps } from 'mo/components/tree';
 import { IMenuItemProps, Menu } from 'mo/components/menu';
 import { Button } from 'mo/components/button';
 import type { IFolderTreeController } from 'mo/controller/explorer/folderTree';
@@ -126,17 +126,20 @@ const FolderTree: React.FunctionComponent<IFolderTreeProps> = (props) => {
         contextView?.hide();
     };
 
-    const handleRightClick = (event, data) => {
-        const menuItems = onRightClick?.(data) || [];
+    const handleRightClick: ITreeProps['onRightClick'] = (event, data) => {
+        if ((event.target as HTMLElement).nodeName !== 'INPUT') {
+            event.preventDefault();
+            const menuItems = onRightClick?.(data) || [];
 
-        menuItems.length &&
-            contextView?.show(getEventPosition(event), () => (
-                <Menu
-                    role="menu"
-                    onClick={(_, item) => handleMenuClick(item!, data)}
-                    data={menuItems}
-                />
-            ));
+            menuItems.length &&
+                contextView?.show(getEventPosition(event), () => (
+                    <Menu
+                        role="menu"
+                        onClick={(_, item) => handleMenuClick(item!, data)}
+                        data={menuItems}
+                    />
+                ));
+        }
     };
 
     const handleUpdateFile = (

src/workbench/sidebar/search/searchTree.tsx

@@ -14,6 +14,7 @@ const SearchTree = (props: SearchTreeProps) => {
             data={data}
             renderTitle={renderTitle}
             onSelect={onSelect}
+            onRightClick={(e) => e.preventDefault()}
         />
     );
 };