@nocobase/flow-engine 2.1.27 → 2.1.29

package/lib/components/subModel/LazyDropdown.js

@@ -347,19 +347,15 @@ const createSearchItem = /* @__PURE__ */ __name((item, searchKey, currentSearchV
         e.stopPropagation();
       },
       onChange: (e) => {
-        var _a;
         e.stopPropagation();
         const value = e.target.value;
         if (shouldActivateSearchSubmenu) {
           activateSearchSubmenu(searchKey);
         }
-        if (((_a = e.nativeEvent) == null ? void 0 : _a.isComposing) || searchHandlers.isComposing(searchKey)) {
+        if (e.nativeEvent.isComposing || searchHandlers.isComposing(searchKey)) {
           searchHandlers.updateInputValue(searchKey, value);
           return;
         }
-        if (!value && shouldActivateSearchSubmenu) {
-          deactivateSearchSubmenu(searchKey);
-        }
         searchHandlers.updateSearchValue(searchKey, value);
       },
       onCompositionStart: (e) => {
@@ -373,11 +369,7 @@ const createSearchItem = /* @__PURE__ */ __name((item, searchKey, currentSearchV
         e.stopPropagation();
         const value = e.currentTarget.value;
         if (shouldActivateSearchSubmenu) {
-          if (value) {
-            activateSearchSubmenu(searchKey);
-          } else {
-            deactivateSearchSubmenu(searchKey);
-          }
+          activateSearchSubmenu(searchKey);
         }
         searchHandlers.endComposition(searchKey, value);
       },
@@ -385,10 +377,20 @@ const createSearchItem = /* @__PURE__ */ __name((item, searchKey, currentSearchV
         e.stopPropagation();
       },
       onKeyDown: (e) => {
+        if (e.key === "Escape" || e.key === "Tab") {
+          deactivateSearchSubmenu(searchKey);
+          return;
+        }
+        if (shouldActivateSearchSubmenu) {
+          activateSearchSubmenu(searchKey);
+        }
         e.stopPropagation();
       },
       onMouseDown: (e) => {
         e.stopPropagation();
+        if (shouldActivateSearchSubmenu) {
+          activateSearchSubmenu(searchKey);
+        }
       },
       size: "small",
       style: {
@@ -409,7 +411,7 @@ const KEEP_OPEN_LABEL_STYLE = {
   width: "100%"
 };
 const DROPDOWN_PERSIST_TTL_MS = 350;
-const SUBMENU_CLOSE_DELAY = 0.05;
+const MENU_CLOSE_DELAY = 0.3;
 const SUBMENU_MOTION_DISABLED = {
   motionEnter: false,
   motionLeave: false
@@ -419,9 +421,9 @@ const LazyDropdown = /* @__PURE__ */ __name(({ menu, ...props }) => {
   const engine = (0, import_provider.useFlowEngine)();
   const [menuVisible, setMenuVisible] = (0, import_react.useState)(false);
   const [openKeys, setOpenKeys] = (0, import_react.useState)(/* @__PURE__ */ new Set());
-  const [activeSearchKey, setActiveSearchKey] = (0, import_react.useState)(null);
   const [rootItems, setRootItems] = (0, import_react.useState)([]);
   const [rootLoading, setRootLoading] = (0, import_react.useState)(false);
+  const activeSearchKeyRef = (0, import_react.useRef)(null);
   const closeByOutsideClickRef = (0, import_react.useRef)(false);
   const skipPreserveActiveSearchRef = (0, import_react.useRef)(false);
   const dropdownMaxHeight = useNiceDropdownMaxHeight();
@@ -440,12 +442,12 @@ const LazyDropdown = /* @__PURE__ */ __name(({ menu, ...props }) => {
   useSubmenuStyles(menuVisible, dropdownMaxHeight);
   const closeMenu = (0, import_react.useCallback)(() => {
     setMenuVisible(false);
-    setActiveSearchKey(null);
+    activeSearchKeyRef.current = null;
     setOpenKeys(/* @__PURE__ */ new Set());
     clearAllSearchValues();
   }, [clearAllSearchValues]);
   const activateSearchSubmenu = (0, import_react.useCallback)((key) => {
-    setActiveSearchKey(key);
+    activeSearchKeyRef.current = key;
     setOpenKeys((prev) => {
       if (prev.has(key)) return prev;
       const next = new Set(prev);
@@ -454,34 +456,38 @@ const LazyDropdown = /* @__PURE__ */ __name(({ menu, ...props }) => {
     });
   }, []);
   const deactivateSearchSubmenu = (0, import_react.useCallback)((key) => {
-    setActiveSearchKey((prev) => prev === key ? null : prev);
+    if (activeSearchKeyRef.current === key) {
+      activeSearchKeyRef.current = null;
+    }
   }, []);
   const closeActiveSearchForPath = (0, import_react.useCallback)(
     (keyPath) => {
+      const activeSearchKey = activeSearchKeyRef.current;
       if (!activeSearchKey || keyPath === activeSearchKey || keyPath.startsWith(`${activeSearchKey}/`) || activeSearchKey.startsWith(`${keyPath}/`)) {
         return;
       }
       skipPreserveActiveSearchRef.current = true;
       clearSearchValue(activeSearchKey);
-      setActiveSearchKey(null);
+      activeSearchKeyRef.current = null;
       setOpenKeys((prev) => {
         const next = new Set(prev);
         next.delete(activeSearchKey);
         return next;
       });
     },
-    [activeSearchKey, clearSearchValue]
+    [clearSearchValue]
   );
   const handleMenuOpenChange = (0, import_react.useCallback)(
     (nextOpenKeys) => {
       var _a, _b;
       let normalized = normalizeOpenKeys(nextOpenKeys);
-      if (activeSearchKey && openKeys.has(activeSearchKey) && !normalized.includes(activeSearchKey)) {
-        if (normalized.length || skipPreserveActiveSearchRef.current) {
+      const activeSearchKey = activeSearchKeyRef.current;
+      if (activeSearchKey && !normalized.includes(activeSearchKey)) {
+        if (skipPreserveActiveSearchRef.current) {
           clearSearchValue(activeSearchKey);
-          setActiveSearchKey(null);
+          activeSearchKeyRef.current = null;
         } else {
-          normalized = [activeSearchKey];
+          normalized = Array.from(openKeys);
         }
       }
       if (!normalized.length && shouldPreventClose()) {
@@ -498,7 +504,7 @@ const LazyDropdown = /* @__PURE__ */ __name(({ menu, ...props }) => {
       (_b = dropdownMenuProps.onOpenChange) == null ? void 0 : _b.call(dropdownMenuProps, normalized);
       skipPreserveActiveSearchRef.current = false;
     },
-    [activeSearchKey, clearSearchValue, dropdownMenuProps, openKeys, shouldPreventClose]
+    [clearSearchValue, dropdownMenuProps, openKeys, shouldPreventClose]
   );
   (0, import_react.useEffect)(() => {
     if (!menuVisible) return;
@@ -734,13 +740,14 @@ const LazyDropdown = /* @__PURE__ */ __name(({ menu, ...props }) => {
       ...props,
       open: menuVisible,
       destroyPopupOnHide: true,
+      mouseLeaveDelay: props.mouseLeaveDelay ?? MENU_CLOSE_DELAY,
       overlayClassName,
       placement: "bottomLeft",
       menu: {
         ...dropdownMenuProps,
         openKeys: Array.from(openKeys),
         items,
-        subMenuCloseDelay: dropdownMenuProps.subMenuCloseDelay ?? SUBMENU_CLOSE_DELAY,
+        subMenuCloseDelay: dropdownMenuProps.subMenuCloseDelay ?? MENU_CLOSE_DELAY,
         motion: dropdownMenuProps.motion ?? SUBMENU_MOTION_DISABLED,
         onClick: /* @__PURE__ */ __name(() => {
         }, "onClick"),
@@ -752,7 +759,7 @@ const LazyDropdown = /* @__PURE__ */ __name(({ menu, ...props }) => {
         }
       },
       onOpenChange: (visible, info) => {
-        if (!visible && activeSearchKey && (info == null ? void 0 : info.source) === "trigger" && !closeByOutsideClickRef.current) {
+        if (!visible && activeSearchKeyRef.current && (info == null ? void 0 : info.source) === "trigger" && !closeByOutsideClickRef.current) {
           return;
         }
         if (!visible && shouldPreventClose()) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nocobase/flow-engine",
-  "version": "2.1.27",
+  "version": "2.1.29",
   "private": false,
   "description": "A standalone flow engine for NocoBase, managing workflows, models, and actions.",
   "main": "lib/index.js",
@@ -8,8 +8,8 @@
   "dependencies": {
     "@formily/antd-v5": "1.x",
     "@formily/reactive": "2.x",
-    "@nocobase/sdk": "2.1.27",
-    "@nocobase/shared": "2.1.27",
+    "@nocobase/sdk": "2.1.29",
+    "@nocobase/shared": "2.1.29",
     "ahooks": "^3.7.2",
     "axios": "^1.7.0",
     "dayjs": "^1.11.9",
@@ -37,5 +37,5 @@
   ],
   "author": "NocoBase Team",
   "license": "Apache-2.0",
-  "gitHead": "c1311c48cf65f8eeac17411d3380ebdd0918f1e2"
+  "gitHead": "d9848c5df07cef806cb938bb14b3f4ef5f3d0129"
 }

package/src/components/subModel/LazyDropdown.tsx

@@ -484,13 +484,10 @@ const createSearchItem = (
           if (shouldActivateSearchSubmenu) {
             activateSearchSubmenu(searchKey);
           }
-          if ((e.nativeEvent as any)?.isComposing || searchHandlers.isComposing(searchKey)) {
+          if ((e.nativeEvent as InputEvent).isComposing || searchHandlers.isComposing(searchKey)) {
             searchHandlers.updateInputValue(searchKey, value);
             return;
           }
-          if (!value && shouldActivateSearchSubmenu) {
-            deactivateSearchSubmenu(searchKey);
-          }
           searchHandlers.updateSearchValue(searchKey, value);
         }}
         onCompositionStart={(e) => {
@@ -504,11 +501,7 @@ const createSearchItem = (
           e.stopPropagation();
           const value = e.currentTarget.value;
           if (shouldActivateSearchSubmenu) {
-            if (value) {
-              activateSearchSubmenu(searchKey);
-            } else {
-              deactivateSearchSubmenu(searchKey);
-            }
+            activateSearchSubmenu(searchKey);
           }
           searchHandlers.endComposition(searchKey, value);
         }}
@@ -516,11 +509,21 @@ const createSearchItem = (
           e.stopPropagation();
         }}
         onKeyDown={(e) => {
+          if (e.key === 'Escape' || e.key === 'Tab') {
+            deactivateSearchSubmenu(searchKey);
+            return;
+          }
+          if (shouldActivateSearchSubmenu) {
+            activateSearchSubmenu(searchKey);
+          }
           e.stopPropagation();
         }}
         onMouseDown={(e) => {
           // 防止菜单聚焦丢失或页面滚动
           e.stopPropagation();
+          if (shouldActivateSearchSubmenu) {
+            activateSearchSubmenu(searchKey);
+          }
         }}
         size="small"
         style={{
@@ -552,7 +555,7 @@ const KEEP_OPEN_LABEL_STYLE: React.CSSProperties = {
 
 // 短暂保持打开状态的注册表（用于跨父节点快速重建时的恢复）
 const DROPDOWN_PERSIST_TTL_MS = 350;
-const SUBMENU_CLOSE_DELAY = 0.05;
+const MENU_CLOSE_DELAY = 0.3;
 const SUBMENU_MOTION_DISABLED = {
   motionEnter: false,
   motionLeave: false,
@@ -563,9 +566,9 @@ const LazyDropdown: React.FC<Omit<DropdownProps, 'menu'> & { menu: LazyDropdownM
   const engine = useFlowEngine();
   const [menuVisible, setMenuVisible] = useState(false);
   const [openKeys, setOpenKeys] = useState<Set<string>>(new Set());
-  const [activeSearchKey, setActiveSearchKey] = useState<string | null>(null);
   const [rootItems, setRootItems] = useState<Item[]>([]);
   const [rootLoading, setRootLoading] = useState(false);
+  const activeSearchKeyRef = useRef<string | null>(null);
   const closeByOutsideClickRef = useRef(false);
   const skipPreserveActiveSearchRef = useRef(false);
   const dropdownMaxHeight = useNiceDropdownMaxHeight();
@@ -589,13 +592,13 @@ const LazyDropdown: React.FC<Omit<DropdownProps, 'menu'> & { menu: LazyDropdownM
 
   const closeMenu = useCallback(() => {
     setMenuVisible(false);
-    setActiveSearchKey(null);
+    activeSearchKeyRef.current = null;
     setOpenKeys(new Set());
     clearAllSearchValues();
   }, [clearAllSearchValues]);
 
   const activateSearchSubmenu = useCallback((key: string) => {
-    setActiveSearchKey(key);
+    activeSearchKeyRef.current = key;
     setOpenKeys((prev) => {
       if (prev.has(key)) return prev;
       const next = new Set(prev);
@@ -605,11 +608,14 @@ const LazyDropdown: React.FC<Omit<DropdownProps, 'menu'> & { menu: LazyDropdownM
   }, []);
 
   const deactivateSearchSubmenu = useCallback((key: string) => {
-    setActiveSearchKey((prev) => (prev === key ? null : prev));
+    if (activeSearchKeyRef.current === key) {
+      activeSearchKeyRef.current = null;
+    }
   }, []);
 
   const closeActiveSearchForPath = useCallback(
     (keyPath: string) => {
+      const activeSearchKey = activeSearchKeyRef.current;
       if (
         !activeSearchKey ||
         keyPath === activeSearchKey ||
@@ -621,25 +627,26 @@ const LazyDropdown: React.FC<Omit<DropdownProps, 'menu'> & { menu: LazyDropdownM
 
       skipPreserveActiveSearchRef.current = true;
       clearSearchValue(activeSearchKey);
-      setActiveSearchKey(null);
+      activeSearchKeyRef.current = null;
       setOpenKeys((prev) => {
         const next = new Set(prev);
         next.delete(activeSearchKey);
         return next;
       });
     },
-    [activeSearchKey, clearSearchValue],
+    [clearSearchValue],
   );
 
   const handleMenuOpenChange = useCallback(
     (nextOpenKeys: string[]) => {
       let normalized = normalizeOpenKeys(nextOpenKeys);
-      if (activeSearchKey && openKeys.has(activeSearchKey) && !normalized.includes(activeSearchKey)) {
-        if (normalized.length || skipPreserveActiveSearchRef.current) {
+      const activeSearchKey = activeSearchKeyRef.current;
+      if (activeSearchKey && !normalized.includes(activeSearchKey)) {
+        if (skipPreserveActiveSearchRef.current) {
           clearSearchValue(activeSearchKey);
-          setActiveSearchKey(null);
+          activeSearchKeyRef.current = null;
         } else {
-          normalized = [activeSearchKey];
+          normalized = Array.from(openKeys);
         }
       }
 
@@ -658,7 +665,7 @@ const LazyDropdown: React.FC<Omit<DropdownProps, 'menu'> & { menu: LazyDropdownM
       dropdownMenuProps.onOpenChange?.(normalized);
       skipPreserveActiveSearchRef.current = false;
     },
-    [activeSearchKey, clearSearchValue, dropdownMenuProps, openKeys, shouldPreventClose],
+    [clearSearchValue, dropdownMenuProps, openKeys, shouldPreventClose],
   );
 
   useEffect(() => {
@@ -957,13 +964,14 @@ const LazyDropdown: React.FC<Omit<DropdownProps, 'menu'> & { menu: LazyDropdownM
       {...props}
       open={menuVisible}
       destroyPopupOnHide
+      mouseLeaveDelay={props.mouseLeaveDelay ?? MENU_CLOSE_DELAY}
       overlayClassName={overlayClassName}
       placement="bottomLeft"
       menu={{
         ...dropdownMenuProps,
         openKeys: Array.from(openKeys),
         items: items,
-        subMenuCloseDelay: dropdownMenuProps.subMenuCloseDelay ?? SUBMENU_CLOSE_DELAY,
+        subMenuCloseDelay: dropdownMenuProps.subMenuCloseDelay ?? MENU_CLOSE_DELAY,
         motion: dropdownMenuProps.motion ?? SUBMENU_MOTION_DISABLED,
         onClick: () => {},
         onOpenChange: handleMenuOpenChange,
@@ -974,7 +982,7 @@ const LazyDropdown: React.FC<Omit<DropdownProps, 'menu'> & { menu: LazyDropdownM
         },
       }}
       onOpenChange={(visible, info) => {
-        if (!visible && activeSearchKey && info?.source === 'trigger' && !closeByOutsideClickRef.current) {
+        if (!visible && activeSearchKeyRef.current && info?.source === 'trigger' && !closeByOutsideClickRef.current) {
           return;
         }
 

package/src/components/subModel/__tests__/AddSubModelButton.test.tsx

@@ -411,7 +411,7 @@ describe('transformItems - searchable flags', () => {
     await waitFor(() => expect(screen.getAllByText('No data').length).toBeGreaterThan(0));
   });
 
-  it('closes searchable submenu after focus without input', async () => {
+  it('keeps searchable submenu open while interacting with its input', async () => {
     const engine = new FlowEngine();
     await engine.flowSettings.forceEnable();
     class Parent extends FlowModel {}
@@ -451,7 +451,11 @@ describe('transformItems - searchable flags', () => {
     await user.click(screen.getByRole('textbox'));
     fireEvent.mouseLeave(screen.getByText('Fields'));
 
-    await waitFor(() => expect(screen.queryByText('Field 1')).not.toBeInTheDocument());
+    await act(async () => {
+      await new Promise((resolve) => setTimeout(resolve, 350));
+    });
+
+    expect(screen.getByText('Field 1')).toBeInTheDocument();
   });
 
   it('closes active searchable submenu after outside click', async () => {