@hsu-react/ui 2.4.2 → 2.4.4

package/es/components/Icon/index.d.ts

@@ -6,5 +6,11 @@ interface IconProps extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpa
     onRef?: (ref?: React.RefObject<HTMLDivElement>) => void;
     fontSize?: number | string;
 }
-declare const Icon: React.FC<IconProps>;
+/**
+ * `forwardRef` 不是可选的：`Tooltip` / `Dropdown` / `Popover` 都要往触发元素上挂 ref
+ * 才能定位浮层。作为普通函数组件时，把 Icon 直接塞进它们里面会让 React 报
+ * “Function components cannot be given refs”，浮层的定位也失去了锚点。
+ * 图标是这几个组件最常见的触发元素，所以这个坑几乎人人会踩。
+ */
+declare const Icon: React.ForwardRefExoticComponent<Omit<IconProps, "ref"> & React.RefAttributes<HTMLSpanElement>>;
 export default Icon;

package/es/components/Icon/index.js

@@ -9,7 +9,7 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 import { Icon as Iconify } from "@iconify/react";
 import * as AntdIcons from "@ant-design/icons";
-import React, { useEffect, useRef } from "react";
+import React, { useCallback, useEffect, useRef } from "react";
 import classNames from "classnames";
 import styles from "./index.module.scss";
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -19,7 +19,13 @@ var getAntdIcon = function getAntdIcon(icon) {
   if (!/(?:Outlined|Filled|TwoTone)$/.test(icon)) return undefined;
   return AntdIcons[icon];
 };
-var Icon = function Icon(props) {
+/**
+ * `forwardRef` 不是可选的：`Tooltip` / `Dropdown` / `Popover` 都要往触发元素上挂 ref
+ * 才能定位浮层。作为普通函数组件时，把 Icon 直接塞进它们里面会让 React 报
+ * “Function components cannot be given refs”，浮层的定位也失去了锚点。
+ * 图标是这几个组件最常见的触发元素，所以这个坑几乎人人会踩。
+ */
+var Icon = /*#__PURE__*/React.forwardRef(function (props, forwardedRef) {
   var iconProps = props.iconProps,
     icon = props.icon,
     className = props.className,
@@ -29,6 +35,17 @@ var Icon = function Icon(props) {
     fontSize = props.fontSize,
     iconConfig = _objectWithoutProperties(props, _excluded);
   var ref = useRef(null);
+
+  // 内外两个 ref 都要喂：内部这个是 `onRef` 回调的载体（老接口，不能动），
+  // 外部那个是浮层组件用来定位的
+  var setRef = useCallback(function (node) {
+    ref.current = node;
+    if (typeof forwardedRef === "function") {
+      forwardedRef(node);
+    } else if (forwardedRef) {
+      forwardedRef.current = node;
+    }
+  }, [forwardedRef]);
   useEffect(function () {
     onRef === null || onRef === void 0 || onRef(ref);
   }, [onRef, ref]);
@@ -43,7 +60,7 @@ var Icon = function Icon(props) {
     return /*#__PURE__*/_jsx(AntdNamedIcon, _objectSpread(_objectSpread({}, iconConfig), {}, {
       className: classNames([styles.icon, className]),
       style: mergedStyle,
-      ref: ref
+      ref: setRef
     }));
   }
 
@@ -51,7 +68,7 @@ var Icon = function Icon(props) {
   // the antd Icon's svg (whose viewBox would scale the inner svg down so much the icon becomes invisible).
   return /*#__PURE__*/_jsx("span", _objectSpread(_objectSpread({}, iconConfig), {}, {
     role: "img",
-    ref: ref,
+    ref: setRef,
     className: classNames(["anticon", styles.icon, className]),
     style: mergedStyle,
     children: /*#__PURE__*/_jsx(Iconify, _objectSpread(_objectSpread({}, iconProps), {}, {
@@ -60,5 +77,6 @@ var Icon = function Icon(props) {
       height: "1em"
     }))
   }));
-};
+});
+Icon.displayName = "Icon";
 export default Icon;

package/es/layout/NavTabBar/_hooks/useTabPath.js

@@ -14,7 +14,7 @@ function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o =
 function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
 function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
-import { useCallback, useEffect, useState } from "react";
+import { useCallback, useEffect, useMemo, useState } from "react";
 import { useLocation } from "react-router";
 import { checkTabPathMatch } from "../_utils/pathMatch";
 import { array_is_includes } from "hsu-utils";
@@ -25,6 +25,19 @@ export var useTabPath = function useTabPath(_ref) {
   var items = _ref.items,
     affixRouter = _ref.affixRouter;
   var location = useLocation();
+
+  /**
+   * Keyed on the *contents* of `affixRouter`, not on the array itself.
+   *
+   * Callers pass an inline literal (`affixRouter={[HOME]}`), and omitting the prop hands the
+   * component a fresh `[]` default on every render — either way the array identity changes each
+   * time. Depending on it directly re-runs the effect below on every render, and that effect
+   * calls setState, so the whole thing becomes a render loop.
+   */
+  var affixKey = affixRouter.join("\x01");
+  var affixSet = useMemo(function () {
+    return new Set(affixKey ? affixKey.split("\x01") : []);
+  }, [affixKey]);
   var _useState = useState(""),
     _useState2 = _slicedToArray(_useState, 2),
     tabKey = _useState2[0],
@@ -43,7 +56,7 @@ export var useTabPath = function useTabPath(_ref) {
         _checkAffix(item.children);
       } else {
         // Check whether it is an affixed route
-        var isAffix = affixRouter.includes(item.key) || item.affix;
+        var isAffix = affixSet.has(item.key) || item.affix;
         if (isAffix) {
           setOpenkeys(function (prev) {
             var find = prev.find(function (i) {
@@ -57,7 +70,7 @@ export var useTabPath = function useTabPath(_ref) {
         }
       }
     });
-  }, [affixRouter]);
+  }, [affixSet]);
   var _checkPath = useCallback(function (items, parents) {
     var pathname = decodeURI(location.pathname);
     var search = location.search;
@@ -79,36 +92,48 @@ export var useTabPath = function useTabPath(_ref) {
             // Handle param routes
             setTabKey("".concat(pathname).concat(search));
             setOpenkeys(function (prev) {
+              var nextKey = "".concat(pathname).concat(search);
               var find = prev.find(function (i) {
                 return i.key.split("?")[0] === pathname;
               });
               if (find) {
+                // Already on this key: return `prev` untouched. `map` builds a new array
+                // every time, and React treats a new reference as a state change — which is
+                // the other half of the render loop above.
+                if (find.key === nextKey) {
+                  return prev;
+                }
                 return prev.map(function (i) {
                   return i.key.split("?")[0] === pathname ? _objectSpread(_objectSpread({}, i), {}, {
-                    key: "".concat(pathname).concat(search)
+                    key: nextKey
                   }) : i;
                 });
               }
               return [].concat(_toConsumableArray(prev), [_objectSpread(_objectSpread({}, item), {}, {
-                key: "".concat(pathname).concat(search)
+                key: nextKey
               })]);
             });
           } else {
             // Handle plain routes
             setTabKey("".concat(item.key).concat(search));
             setOpenkeys(function (prev) {
+              var nextKey = "".concat(item.key).concat(search);
               var find = prev.find(function (i) {
                 return i.key.split("?")[0] === item.key;
               });
               if (find) {
+                // Same as above: an unchanged tab must not produce a new reference
+                if (find.key === nextKey) {
+                  return prev;
+                }
                 return prev.map(function (i) {
                   return i.key.split("?")[0] === item.key ? _objectSpread(_objectSpread({}, i), {}, {
-                    key: "".concat(item.key).concat(search)
+                    key: nextKey
                   }) : i;
                 });
               }
               return [].concat(_toConsumableArray(prev), [_objectSpread(_objectSpread({}, item), {}, {
-                key: "".concat(item.key).concat(search)
+                key: nextKey
               })]);
             });
           }
@@ -116,12 +141,24 @@ export var useTabPath = function useTabPath(_ref) {
       }
     });
   }, [location.pathname, location.search]);
+
+  /**
+   * Closing the last tab navigates to `basePath` — but when that tab *was* `basePath`, the
+   * location never changes, so path matching would not re-run and the bar would be left empty
+   * while its page is still on screen. Going empty has to re-trigger the match on its own.
+   *
+   * This settles rather than looping: re-matching adds the tab back, which flips `isEmpty` and
+   * runs the effect once more, and that pass finds the tab already present and returns the same
+   * state object — so React stops there. (Only true because the setters below bail out when
+   * nothing changed; without that this would spin.)
+   */
+  var isEmpty = openKeys.length === 0;
   useEffect(function () {
     // Handle affixed routes first to populate openKeys
     _checkAffix(items);
     // Then run path matching
     _checkPath(items);
-  }, [_checkAffix, _checkPath, items]);
+  }, [_checkAffix, _checkPath, items, isEmpty]);
   return {
     tabKey: tabKey,
     setTabKey: setTabKey,

package/lib/components/Icon/index.d.ts

@@ -6,5 +6,11 @@ interface IconProps extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpa
     onRef?: (ref?: React.RefObject<HTMLDivElement>) => void;
     fontSize?: number | string;
 }
-declare const Icon: React.FC<IconProps>;
+/**
+ * `forwardRef` 不是可选的：`Tooltip` / `Dropdown` / `Popover` 都要往触发元素上挂 ref
+ * 才能定位浮层。作为普通函数组件时，把 Icon 直接塞进它们里面会让 React 报
+ * “Function components cannot be given refs”，浮层的定位也失去了锚点。
+ * 图标是这几个组件最常见的触发元素，所以这个坑几乎人人会踩。
+ */
+declare const Icon: React.ForwardRefExoticComponent<Omit<IconProps, "ref"> & React.RefAttributes<HTMLSpanElement>>;
 export default Icon;

package/lib/components/Icon/index.js

@@ -19,7 +19,13 @@ const getAntdIcon = icon => {
   if (!/(?:Outlined|Filled|TwoTone)$/.test(icon)) return undefined;
   return AntdIcons[icon];
 };
-const Icon = props => {
+/**
+ * `forwardRef` 不是可选的：`Tooltip` / `Dropdown` / `Popover` 都要往触发元素上挂 ref
+ * 才能定位浮层。作为普通函数组件时，把 Icon 直接塞进它们里面会让 React 报
+ * “Function components cannot be given refs”，浮层的定位也失去了锚点。
+ * 图标是这几个组件最常见的触发元素，所以这个坑几乎人人会踩。
+ */
+const Icon = /*#__PURE__*/_react2.default.forwardRef((props, forwardedRef) => {
   const {
     iconProps,
     icon,
@@ -31,6 +37,17 @@ const Icon = props => {
     ...iconConfig
   } = props;
   const ref = (0, _react2.useRef)(null);
+
+  // 内外两个 ref 都要喂：内部这个是 `onRef` 回调的载体（老接口，不能动），
+  // 外部那个是浮层组件用来定位的
+  const setRef = (0, _react2.useCallback)(node => {
+    ref.current = node;
+    if (typeof forwardedRef === "function") {
+      forwardedRef(node);
+    } else if (forwardedRef) {
+      forwardedRef.current = node;
+    }
+  }, [forwardedRef]);
   (0, _react2.useEffect)(() => {
     onRef?.(ref);
   }, [onRef, ref]);
@@ -47,7 +64,7 @@ const Icon = props => {
       ...iconConfig,
       className: (0, _classnames.default)([_indexModule.default.icon, className]),
       style: mergedStyle,
-      ref: ref
+      ref: setRef
     });
   }
 
@@ -56,7 +73,7 @@ const Icon = props => {
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
     ...iconConfig,
     role: "img",
-    ref: ref,
+    ref: setRef,
     className: (0, _classnames.default)(["anticon", _indexModule.default.icon, className]),
     style: mergedStyle,
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_react.Icon, {
@@ -66,5 +83,6 @@ const Icon = props => {
       height: "1em"
     })
   });
-};
+});
+Icon.displayName = "Icon";
 var _default = exports.default = Icon;

package/lib/layout/NavTabBar/_hooks/useTabPath.js

@@ -16,6 +16,17 @@ const useTabPath = ({
   affixRouter
 }) => {
   const location = (0, _reactRouter.useLocation)();
+
+  /**
+   * Keyed on the *contents* of `affixRouter`, not on the array itself.
+   *
+   * Callers pass an inline literal (`affixRouter={[HOME]}`), and omitting the prop hands the
+   * component a fresh `[]` default on every render — either way the array identity changes each
+   * time. Depending on it directly re-runs the effect below on every render, and that effect
+   * calls setState, so the whole thing becomes a render loop.
+   */
+  const affixKey = affixRouter.join("\u0001");
+  const affixSet = (0, _react.useMemo)(() => new Set(affixKey ? affixKey.split("\u0001") : []), [affixKey]);
   const [tabKey, setTabKey] = (0, _react.useState)("");
   const [openKeys, setOpenkeys] = (0, _react.useState)([]);
 
@@ -28,7 +39,7 @@ const useTabPath = ({
         _checkAffix(item.children);
       } else {
         // Check whether it is an affixed route
-        const isAffix = affixRouter.includes(item.key) || item.affix;
+        const isAffix = affixSet.has(item.key) || item.affix;
         if (isAffix) {
           setOpenkeys(prev => {
             const find = prev.find(i => i.key === item.key);
@@ -40,7 +51,7 @@ const useTabPath = ({
         }
       }
     });
-  }, [affixRouter]);
+  }, [affixSet]);
   const _checkPath = (0, _react.useCallback)((items, parents) => {
     const pathname = decodeURI(location.pathname);
     const search = location.search;
@@ -58,32 +69,44 @@ const useTabPath = ({
             // Handle param routes
             setTabKey(`${pathname}${search}`);
             setOpenkeys(prev => {
+              const nextKey = `${pathname}${search}`;
               const find = prev.find(i => i.key.split("?")[0] === pathname);
               if (find) {
+                // Already on this key: return `prev` untouched. `map` builds a new array
+                // every time, and React treats a new reference as a state change — which is
+                // the other half of the render loop above.
+                if (find.key === nextKey) {
+                  return prev;
+                }
                 return prev.map(i => i.key.split("?")[0] === pathname ? {
                   ...i,
-                  key: `${pathname}${search}`
+                  key: nextKey
                 } : i);
               }
               return [...prev, {
                 ...item,
-                key: `${pathname}${search}`
+                key: nextKey
               }];
             });
           } else {
             // Handle plain routes
             setTabKey(`${item.key}${search}`);
             setOpenkeys(prev => {
+              const nextKey = `${item.key}${search}`;
               const find = prev.find(i => i.key.split("?")[0] === item.key);
               if (find) {
+                // Same as above: an unchanged tab must not produce a new reference
+                if (find.key === nextKey) {
+                  return prev;
+                }
                 return prev.map(i => i.key.split("?")[0] === item.key ? {
                   ...i,
-                  key: `${item.key}${search}`
+                  key: nextKey
                 } : i);
               }
               return [...prev, {
                 ...item,
-                key: `${item.key}${search}`
+                key: nextKey
               }];
             });
           }
@@ -91,12 +114,24 @@ const useTabPath = ({
       }
     });
   }, [location.pathname, location.search]);
+
+  /**
+   * Closing the last tab navigates to `basePath` — but when that tab *was* `basePath`, the
+   * location never changes, so path matching would not re-run and the bar would be left empty
+   * while its page is still on screen. Going empty has to re-trigger the match on its own.
+   *
+   * This settles rather than looping: re-matching adds the tab back, which flips `isEmpty` and
+   * runs the effect once more, and that pass finds the tab already present and returns the same
+   * state object — so React stops there. (Only true because the setters below bail out when
+   * nothing changed; without that this would spin.)
+   */
+  const isEmpty = openKeys.length === 0;
   (0, _react.useEffect)(() => {
     // Handle affixed routes first to populate openKeys
     _checkAffix(items);
     // Then run path matching
     _checkPath(items);
-  }, [_checkAffix, _checkPath, items]);
+  }, [_checkAffix, _checkPath, items, isEmpty]);
   return {
     tabKey,
     setTabKey,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hsu-react/ui",
-  "version": "2.4.2",
+  "version": "2.4.4",
   "description": "一套基于 React + Ant Design 的中后台业务组件库",
   "license": "MIT",
   "type": "module",

package/src/components/Icon/index.tsx

@@ -5,7 +5,7 @@ import {
 } from "@iconify/react";
 
 import * as AntdIcons from "@ant-design/icons";
-import React, { useEffect, useRef } from "react";
+import React, { useCallback, useEffect, useRef } from "react";
 import classNames from "classnames";
 import styles from "./index.module.scss";
 
@@ -38,7 +38,13 @@ interface IconProps
   fontSize?: number | string;
 }
 
-const Icon: React.FC<IconProps> = (props) => {
+/**
+ * `forwardRef` 不是可选的：`Tooltip` / `Dropdown` / `Popover` 都要往触发元素上挂 ref
+ * 才能定位浮层。作为普通函数组件时，把 Icon 直接塞进它们里面会让 React 报
+ * “Function components cannot be given refs”，浮层的定位也失去了锚点。
+ * 图标是这几个组件最常见的触发元素，所以这个坑几乎人人会踩。
+ */
+const Icon = React.forwardRef<HTMLSpanElement, IconProps>((props, forwardedRef) => {
   const {
     iconProps,
     icon,
@@ -51,6 +57,22 @@ const Icon: React.FC<IconProps> = (props) => {
   } = props;
   const ref = useRef<HTMLDivElement>(null);
 
+  // 内外两个 ref 都要喂：内部这个是 `onRef` 回调的载体（老接口，不能动），
+  // 外部那个是浮层组件用来定位的
+  const setRef = useCallback(
+    (node: HTMLSpanElement | null) => {
+      (ref as React.MutableRefObject<HTMLDivElement | null>).current =
+        node as unknown as HTMLDivElement | null;
+
+      if (typeof forwardedRef === "function") {
+        forwardedRef(node);
+      } else if (forwardedRef) {
+        forwardedRef.current = node;
+      }
+    },
+    [forwardedRef]
+  );
+
   useEffect(() => {
     onRef?.(ref);
   }, [onRef, ref]);
@@ -69,7 +91,7 @@ const Icon: React.FC<IconProps> = (props) => {
         {...iconConfig}
         className={classNames([styles.icon, className])}
         style={mergedStyle}
-        ref={ref as unknown as React.Ref<HTMLSpanElement>}
+        ref={setRef}
       />
     );
   }
@@ -80,13 +102,15 @@ const Icon: React.FC<IconProps> = (props) => {
     <span
       {...iconConfig}
       role="img"
-      ref={ref as unknown as React.Ref<HTMLSpanElement>}
+      ref={setRef}
       className={classNames(["anticon", styles.icon, className])}
       style={mergedStyle}
     >
       <Iconify {...iconProps} icon={icon} width="1em" height="1em" />
     </span>
   );
-};
+});
+
+Icon.displayName = "Icon";
 
 export default Icon;

package/src/layout/NavTabBar/_hooks/useTabPath.ts

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useState } from "react";
+import { useCallback, useEffect, useMemo, useState } from "react";
 import { useLocation } from "react-router";
 import { TabType } from "..";
 import { checkTabPathMatch } from "../_utils/pathMatch";
@@ -14,6 +14,17 @@ interface UseTabPathOptions {
  */
 export const useTabPath = ({ items, affixRouter }: UseTabPathOptions) => {
   const location = useLocation();
+
+  /**
+   * Keyed on the *contents* of `affixRouter`, not on the array itself.
+   *
+   * Callers pass an inline literal (`affixRouter={[HOME]}`), and omitting the prop hands the
+   * component a fresh `[]` default on every render — either way the array identity changes each
+   * time. Depending on it directly re-runs the effect below on every render, and that effect
+   * calls setState, so the whole thing becomes a render loop.
+   */
+  const affixKey = affixRouter.join("\u0001");
+  const affixSet = useMemo(() => new Set(affixKey ? affixKey.split("\u0001") : []), [affixKey]);
   const [tabKey, setTabKey] = useState<string>("");
   const [openKeys, setOpenkeys] = useState<TabType[]>([]);
 
@@ -27,7 +38,7 @@ export const useTabPath = ({ items, affixRouter }: UseTabPathOptions) => {
           _checkAffix(item.children);
         } else {
           // Check whether it is an affixed route
-          const isAffix = affixRouter.includes(item.key) || item.affix;
+          const isAffix = affixSet.has(item.key) || item.affix;
           if (isAffix) {
             setOpenkeys((prev) => {
               const find = prev.find((i) => i.key === item.key);
@@ -40,7 +51,7 @@ export const useTabPath = ({ items, affixRouter }: UseTabPathOptions) => {
         }
       });
     },
-    [affixRouter]
+    [affixSet]
   );
 
   const _checkPath = useCallback(
@@ -72,32 +83,42 @@ export const useTabPath = ({ items, affixRouter }: UseTabPathOptions) => {
               setTabKey(`${pathname}${search}`);
 
               setOpenkeys((prev) => {
+                const nextKey = `${pathname}${search}`;
                 const find = prev.find((i) => i.key.split("?")[0] === pathname);
                 if (find) {
+                  // Already on this key: return `prev` untouched. `map` builds a new array
+                  // every time, and React treats a new reference as a state change — which is
+                  // the other half of the render loop above.
+                  if (find.key === nextKey) {
+                    return prev;
+                  }
                   return prev.map((i) =>
-                    i.key.split("?")[0] === pathname
-                      ? { ...i, key: `${pathname}${search}` }
-                      : i
+                    i.key.split("?")[0] === pathname ? { ...i, key: nextKey } : i
                   );
                 }
 
-                return [...prev, { ...item, key: `${pathname}${search}` }];
+                return [...prev, { ...item, key: nextKey }];
               });
             } else {
               // Handle plain routes
               setTabKey(`${item.key}${search}`);
 
               setOpenkeys((prev) => {
+                const nextKey = `${item.key}${search}`;
                 const find = prev.find((i) => i.key.split("?")[0] === item.key);
                 if (find) {
+                  // Same as above: an unchanged tab must not produce a new reference
+                  if (find.key === nextKey) {
+                    return prev;
+                  }
                   return prev.map((i) =>
                     i.key.split("?")[0] === item.key
-                      ? { ...i, key: `${item.key}${search}` }
+                      ? { ...i, key: nextKey }
                       : i
                   );
                 }
 
-                return [...prev, { ...item, key: `${item.key}${search}` }];
+                return [...prev, { ...item, key: nextKey }];
               });
             }
           }
@@ -107,12 +128,24 @@ export const useTabPath = ({ items, affixRouter }: UseTabPathOptions) => {
     [location.pathname, location.search]
   );
 
+  /**
+   * Closing the last tab navigates to `basePath` — but when that tab *was* `basePath`, the
+   * location never changes, so path matching would not re-run and the bar would be left empty
+   * while its page is still on screen. Going empty has to re-trigger the match on its own.
+   *
+   * This settles rather than looping: re-matching adds the tab back, which flips `isEmpty` and
+   * runs the effect once more, and that pass finds the tab already present and returns the same
+   * state object — so React stops there. (Only true because the setters below bail out when
+   * nothing changed; without that this would spin.)
+   */
+  const isEmpty = openKeys.length === 0;
+
   useEffect(() => {
     // Handle affixed routes first to populate openKeys
     _checkAffix(items);
     // Then run path matching
     _checkPath(items);
-  }, [_checkAffix, _checkPath, items]);
+  }, [_checkAffix, _checkPath, items, isEmpty]);
 
   return { tabKey, setTabKey, openKeys, setOpenkeys };
 };