fix: prevent call loadData when editing (#789)

* fix: prevent call loadData when editing

* test: improve test coverage

Author: mortalYoung

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

@@ -148,6 +148,24 @@ describe('The FolderTree Component', () => {
         ).toContain(folderTreeEditClassName);
     });
 
+    test('Should NOT call loadData in editing', () => {
+        const mockFn = jest.fn(() => Promise.resolve());
+        const { getByRole } = render(
+            <FolderTreeViewPanel
+                folderTree={{
+                    data: [{ ...mockTreeData[0], children: [mockEditFile] }],
+                }}
+                onLoadData={mockFn}
+            />
+        );
+
+        const input = getByRole('input') as HTMLInputElement;
+        expect(input).toBeInTheDocument();
+
+        fireEvent.click(input);
+        expect(mockFn).not.toBeCalled();
+    });
+
     test('Should support to update file name via blur or keypress', () => {
         const mockFn = jest.fn();
         const { getByRole } = render(

src/workbench/sidebar/explore/folderTree.tsx

@@ -205,6 +205,7 @@ const FolderTree: React.FunctionComponent<IFolderTreeProps> = (props) => {
                 autoComplete="off"
                 autoFocus
                 onBlur={(e) => handleInputBlur(e, node)}
+                onClick={(e) => e.stopPropagation()}
             />
         ) : (
             name!

src/workbench/sidebar/explore/style.scss

@@ -34,12 +34,12 @@
             font-family: inherit;
             font-size: 13px;
             height: 20px;
-            left: -2px;
+            left: 0;
             margin: 0;
             outline: none;
             padding: 0;
             position: relative;
-            width: 100%;
+            width: calc(100% - 2px);
 
             &:focus,
             &:active {