@hsu-react/ui 0.0.15 → 0.0.16

package/es/components/TextEllipsis/index.js

@@ -107,6 +107,8 @@ var TextEllipsis = function TextEllipsis(_ref) {
     };
     var textContent = getTextContent(children);
     var update = function update() {
+      // Detached nodes measure 0/0 — never let them overwrite a live measurement
+      if (!element.isConnected) return;
       var isTextOverflow = element.scrollWidth > element.clientWidth || element.scrollHeight > element.clientHeight;
       setIsOverflow(isTextOverflow);
       setMeasuredWidth(element.clientWidth);
@@ -179,24 +181,24 @@ var TextEllipsis = function TextEllipsis(_ref) {
     })]
   });
 
-  // Show the Tooltip only when overflowing and not disabled
-  if (isOverflow && !disabled) {
-    return /*#__PURE__*/_jsx(Tooltip, _objectSpread(_objectSpread({
-      arrow: false,
-      placement: "bottomLeft"
-    }, restTooltipConfig), {}, {
-      title: tooltipTitle,
-      styles: _objectSpread({
-        body: {
-          width: tooltipWidth,
-          overflow: "auto",
-          maxHeight: "300px",
-          whiteSpace: "pre-wrap"
-        }
-      }, styles),
-      children: content
-    }));
-  }
-  return content;
+  // Always keep the Tooltip wrapper mounted and toggle via title:
+  // conditionally wrapping remounts the text DOM when isOverflow flips, which detaches
+  // the node the measurement effect's ResizeObserver holds — its final callback then
+  // reads 0/0 from the detached node and resets isOverflow, so the Tooltip never shows.
+  return /*#__PURE__*/_jsx(Tooltip, _objectSpread(_objectSpread({
+    arrow: false,
+    placement: "bottomLeft"
+  }, restTooltipConfig), {}, {
+    title: isOverflow && !disabled ? tooltipTitle : undefined,
+    styles: _objectSpread({
+      body: {
+        width: tooltipWidth,
+        overflow: "auto",
+        maxHeight: "300px",
+        whiteSpace: "pre-wrap"
+      }
+    }, styles),
+    children: content
+  }));
 };
 export default TextEllipsis;

package/lib/components/TextEllipsis/index.js

@@ -87,6 +87,8 @@ const TextEllipsis = ({
     };
     const textContent = getTextContent(children);
     const update = () => {
+      // Detached nodes measure 0/0 — never let them overwrite a live measurement
+      if (!element.isConnected) return;
       const isTextOverflow = element.scrollWidth > element.clientWidth || element.scrollHeight > element.clientHeight;
       setIsOverflow(isTextOverflow);
       setMeasuredWidth(element.clientWidth);
@@ -157,25 +159,25 @@ const TextEllipsis = ({
     })]
   });
 
-  // Show the Tooltip only when overflowing and not disabled
-  if (isOverflow && !disabled) {
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Tooltip, {
-      arrow: false,
-      placement: "bottomLeft",
-      ...restTooltipConfig,
-      title: tooltipTitle,
-      styles: {
-        body: {
-          width: tooltipWidth,
-          overflow: "auto",
-          maxHeight: "300px",
-          whiteSpace: "pre-wrap"
-        },
-        ...styles
+  // Always keep the Tooltip wrapper mounted and toggle via title:
+  // conditionally wrapping remounts the text DOM when isOverflow flips, which detaches
+  // the node the measurement effect's ResizeObserver holds — its final callback then
+  // reads 0/0 from the detached node and resets isOverflow, so the Tooltip never shows.
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Tooltip, {
+    arrow: false,
+    placement: "bottomLeft",
+    ...restTooltipConfig,
+    title: isOverflow && !disabled ? tooltipTitle : undefined,
+    styles: {
+      body: {
+        width: tooltipWidth,
+        overflow: "auto",
+        maxHeight: "300px",
+        whiteSpace: "pre-wrap"
       },
-      children: content
-    });
-  }
-  return content;
+      ...styles
+    },
+    children: content
+  });
 };
 var _default = exports.default = TextEllipsis;

package/package.json

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

package/src/components/TextEllipsis/index.tsx

@@ -109,6 +109,8 @@ const TextEllipsis: React.FC<TextEllipsisProps> = ({
     const textContent = getTextContent(children);
 
     const update = () => {
+      // Detached nodes measure 0/0 — never let them overwrite a live measurement
+      if (!element.isConnected) return;
       const isTextOverflow =
         element.scrollWidth > element.clientWidth ||
         element.scrollHeight > element.clientHeight;
@@ -189,30 +191,29 @@ const TextEllipsis: React.FC<TextEllipsisProps> = ({
     </span>
   );
 
-  // Show the Tooltip only when overflowing and not disabled
-  if (isOverflow && !disabled) {
-    return (
-      <Tooltip
-        arrow={false}
-        placement="bottomLeft"
-        {...restTooltipConfig}
-        title={tooltipTitle}
-        styles={{
-          body: {
-            width: tooltipWidth,
-            overflow: "auto",
-            maxHeight: "300px",
-            whiteSpace: "pre-wrap",
-          },
-          ...styles,
-        }}
-      >
-        {content}
-      </Tooltip>
-    );
-  }
-
-  return content;
+  // Always keep the Tooltip wrapper mounted and toggle via title:
+  // conditionally wrapping remounts the text DOM when isOverflow flips, which detaches
+  // the node the measurement effect's ResizeObserver holds — its final callback then
+  // reads 0/0 from the detached node and resets isOverflow, so the Tooltip never shows.
+  return (
+    <Tooltip
+      arrow={false}
+      placement="bottomLeft"
+      {...restTooltipConfig}
+      title={isOverflow && !disabled ? tooltipTitle : undefined}
+      styles={{
+        body: {
+          width: tooltipWidth,
+          overflow: "auto",
+          maxHeight: "300px",
+          whiteSpace: "pre-wrap",
+        },
+        ...styles,
+      }}
+    >
+      {content}
+    </Tooltip>
+  );
 };
 
 export default TextEllipsis;