fix editor search focus layout error

src/components/editor.tsx

@@ -44,7 +44,6 @@ interface FilterOption {
   filterFocus: boolean;
   filterType: "content" | "id";
   placeholder: string;
-  isFocused: boolean;
 }
 
 const createTreeData = (node: NodeModel, parent?: string) => {
@@ -227,7 +226,6 @@ export const Editor: FC<EditorProps> = ({ onUpdate: updateState, data: editor, .
     filterFocus: true,
     filterType: "content",
     placeholder: "",
-    isFocused: false,
   });
 
   const onSearchChange = (option: FilterOption) => {
@@ -710,10 +708,6 @@ export const Editor: FC<EditorProps> = ({ onUpdate: updateState, data: editor, .
   };
 
   const createNode = () => {
-    if (filterOption.isFocused) {
-      return;
-    }
-
     if (!editor.selectedId) {
       message.warning(t("node.noNodeSelected"));
       return;
@@ -1391,8 +1385,6 @@ export const Editor: FC<EditorProps> = ({ onUpdate: updateState, data: editor, .
                   index: 0,
                 })
               }
-              onFocus={() => setFilterOption({ ...filterOption, isFocused: true })}
-              onBlur={() => setFilterOption({ ...filterOption, isFocused: false })}
               onKeyDownCapture={handleKeyDown}
               suffix={
                 <Flex gap="2px" style={{ alignItems: "center" }}>
@@ -1421,12 +1413,12 @@ export const Editor: FC<EditorProps> = ({ onUpdate: updateState, data: editor, .
                       filterOption.filterFocus && "b3-editor-filter-selected"
                     )}
                     icon={<RiFocus3Line />}
-                    onClick={() =>
+                    onClick={() => {
                       onSearchChange({
                         ...filterOption,
                         filterFocus: !filterOption.filterFocus,
-                      })
-                    }
+                      });
+                    }}
                   />
                 </Flex>
               }
@@ -1471,7 +1463,6 @@ export const Editor: FC<EditorProps> = ({ onUpdate: updateState, data: editor, .
                   filterStr: "",
                   filterType: "content",
                   placeholder: "",
-                  isFocused: false,
                 });
                 keysRef.current?.focus();
               }}

src/components/inspector.tsx

@@ -50,7 +50,6 @@ import {
   isNodeArgOptional,
   isValidVariableName,
   isVariadic,
-  loadVarDef,
   parseExpr,
   usingGroups,
   usingVars,
@@ -259,7 +258,6 @@ const TreeInspector: FC = () => {
 
   // set form values
   useEffect(() => {
-    loadVarDef(workspace.editingTree.import);
     form.resetFields();
     form.setFieldValue("name", workspace.editingTree.name);
     form.setFieldValue("desc", workspace.editingTree.desc);
@@ -624,7 +622,10 @@ const NodeInspector: FC = () => {
     form.setFieldValue("debug", data.debug);
     form.setFieldValue("disabled", data.disabled);
     form.setFieldValue("path", data.path);
-    form.setFieldValue("group", def.group);
+    form.setFieldValue(
+      "group",
+      def.group?.map((g) => ({ label: g, value: g }))
+    );
     if (def.children === undefined || def.children === -1) {
       form.setFieldValue("children", t("node.children.unlimited"));
     } else {
@@ -872,30 +873,32 @@ const NodeInspector: FC = () => {
           labelCol={{ span: "auto" }}
           onFinish={finish}
         >
-          <Form.Item name="id" label={t("node.id")}>
-            <Input disabled={true} />
-          </Form.Item>
-          <Form.Item
-            name="type"
-            label={t("node.type")}
-            rules={[
-              {
-                validator() {
-                  if (def.group && !def.group.some((g) => usingGroups[g])) {
-                    return Promise.reject(
-                      new Error(t("node.groupNotEnabled", { group: def.group }))
-                    );
-                  }
-                  return Promise.resolve();
-                },
-              },
-            ]}
-          >
+          <Form.Item name="type" label={t("node.type")}>
             <Input disabled={true} />
           </Form.Item>
           {workspace.groupDefs.length > 0 && def.group?.length && (
-            <Form.Item name="group" label={t("node.group")}>
-              <GroupDefItem disabled={true} />
+            <Form.Item
+              name="group"
+              label={t("node.group")}
+              rules={[
+                {
+                  validator() {
+                    if (def.group && !def.group.some((g) => usingGroups[g])) {
+                      return Promise.reject(
+                        new Error(t("node.groupNotEnabled", { group: def.group }))
+                      );
+                    }
+                    return Promise.resolve();
+                  },
+                },
+              ]}
+            >
+              <Select
+                style={{ fontSize: "13px" }}
+                mode="multiple"
+                suffixIcon={null}
+                disabled={true}
+              />
             </Form.Item>
           )}
           <Form.Item

src/components/workspace.tsx

@@ -445,6 +445,7 @@ export const Workspace: FC = () => {
                     showSaveDialog(editor);
                   } else {
                     workspace.close(path);
+                    keysRef.current?.focus();
                   }
                 }
               }}