From 3d2074d7ab4e654f34e41461c8733400eadf69d9 Mon Sep 17 00:00:00 2001
From: 07akioni <07akioni2@gmail.com>
Date: Mon, 9 May 2022 01:14:26 +0800
Subject: [PATCH] fix(ellipsis): can't show tooltip if content width is very
 close to container width, closes #1393, closes #2899

---
 CHANGELOG.en-US.md                           |  1 +
 CHANGELOG.zh-CN.md                           |  1 +
 src/ellipsis/demos/zhCN/index.demo-entry.md  |  1 +
 src/ellipsis/demos/zhCN/width-debug.demo.vue |  9 +++++++++
 src/ellipsis/src/Ellipsis.tsx                | 11 +++++++++--
 5 files changed, 21 insertions(+), 2 deletions(-)
 create mode 100644 src/ellipsis/demos/zhCN/width-debug.demo.vue

diff --git a/CHANGELOG.en-US.md b/CHANGELOG.en-US.md
index 1deb23f53ad..d3ce93e38ce 100644
--- a/CHANGELOG.en-US.md
+++ b/CHANGELOG.en-US.md
@@ -11,6 +11,7 @@
 - Fix `n-data-table`'s `work-break` isn't `break-word`.
 - Fix `n-list`'s css variable `n-merged-color` is not correct.
 - Fix `MessageReactive`'s `destroy` method throws error if message has disappeared.
+- Fix `n-ellpisis` can't show tooltip if content width is very close to container width, closes [#1393](https://github.com/TuSimple/naive-ui/issues/1393), [#2899](https://github.com/TuSimple/naive-ui/issues/2899).
 
 ### Feats
 
diff --git a/CHANGELOG.zh-CN.md b/CHANGELOG.zh-CN.md
index 95dfe1ead3a..3f5422f3758 100644
--- a/CHANGELOG.zh-CN.md
+++ b/CHANGELOG.zh-CN.md
@@ -11,6 +11,7 @@
 - 修复 `n-data-table` 的 `work-break` 样式为 `break-word`
 - 修复 `n-list` 的 `n-merged-color` 样式不正常
 - 修复 `MessageReactive` 的 `destroy` 方法在 message 消失后调用会抛错
+- 修复 `n-ellpisis` 在恰好触发省略的时候无法弹出 tooltip，关闭 [#1393](https://github.com/TuSimple/naive-ui/issues/1393)、[#2899](https://github.com/TuSimple/naive-ui/issues/2899)
 
 ### Feats
 
diff --git a/src/ellipsis/demos/zhCN/index.demo-entry.md b/src/ellipsis/demos/zhCN/index.demo-entry.md
index 51534be0e63..8da4ad6cdc2 100644
--- a/src/ellipsis/demos/zhCN/index.demo-entry.md
+++ b/src/ellipsis/demos/zhCN/index.demo-entry.md
@@ -12,6 +12,7 @@ line-clamp.vue
 expand-trigger.vue
 custom-tooltip.vue
 dynamic-debug.vue
+width-debug.vue
 ```
 
 ## API
diff --git a/src/ellipsis/demos/zhCN/width-debug.demo.vue b/src/ellipsis/demos/zhCN/width-debug.demo.vue
new file mode 100644
index 00000000000..5f9be895393
--- /dev/null
+++ b/src/ellipsis/demos/zhCN/width-debug.demo.vue
@@ -0,0 +1,9 @@
+<markdown>
+# Width debug
+</markdown>
+
+<template>
+  <n-ellipsis style="width: 70px; font-family: 'Helvetica Neue'">
+    624748504
+  </n-ellipsis>
+</template>
diff --git a/src/ellipsis/src/Ellipsis.tsx b/src/ellipsis/src/Ellipsis.tsx
index 5d07becd234..0a745eff12b 100644
--- a/src/ellipsis/src/Ellipsis.tsx
+++ b/src/ellipsis/src/Ellipsis.tsx
@@ -44,6 +44,7 @@ export default defineComponent({
       mergedClsPrefixRef
     )
     const triggerRef = ref<HTMLElement | null>(null)
+    const triggerInnerRef = ref<HTMLElement | null>(null)
     const tooltipRef = ref<TooltipInst | null>(null)
     const expandedRef = ref(false)
     const ellipsisStyleRef = computed(() => {
@@ -74,7 +75,12 @@ export default defineComponent({
         if (lineClamp !== undefined) {
           tooltipDisabled = trigger.scrollHeight <= trigger.offsetHeight
         } else {
-          tooltipDisabled = trigger.scrollWidth <= trigger.offsetWidth
+          const { value: triggerInner } = triggerInnerRef
+          if (triggerInner) {
+            tooltipDisabled =
+              triggerInner.getBoundingClientRect().width <=
+              trigger.getBoundingClientRect().width
+          }
         }
         syncCursorStyle(trigger, tooltipDisabled)
       }
@@ -112,7 +118,7 @@ export default defineComponent({
           props.expandTrigger === 'click' ? getTooltipDisabled : undefined
         }
       >
-        {slots}
+        {props.lineClamp ? slots : <span ref="triggerInnerRef">{slots}</span>}
       </span>
     )
     function syncEllipsisStyle (trigger: HTMLElement): void {
@@ -160,6 +166,7 @@ export default defineComponent({
     return {
       mergedTheme,
       triggerRef,
+      triggerInnerRef,
       tooltipRef,
       handleClick: handleClickRef,
       renderTrigger,