From 1c3da53ecdf7b769bc6acbddb4b796f27650e9d1 Mon Sep 17 00:00:00 2001
From: 07akioni <07akioni2@gmail.com>
Date: Fri, 27 Aug 2021 00:17:29 +0800
Subject: [PATCH] fix(mention): menu is too far from text in input mode

---
 CHANGELOG.en-US.md                            | 4 ++++
 CHANGELOG.zh-CN.md                            | 6 +++++-
 src/mention/demos/enUS/manual-trigger.demo.md | 4 ++--
 src/mention/demos/zhCN/manual-trigger.demo.md | 4 ++--
 src/mention/src/utils.ts                      | 4 +++-
 5 files changed, 16 insertions(+), 6 deletions(-)

diff --git a/CHANGELOG.en-US.md b/CHANGELOG.en-US.md
index ad5163f99..8280980eb 100644
--- a/CHANGELOG.en-US.md
+++ b/CHANGELOG.en-US.md
@@ -6,6 +6,10 @@
 
 - `n-mention` add `focus` and `blur` methods.
 
+### Fixes
+
+- Fix `n-mention`'s menu is too far from text in input mode.
+
 ## 2.16.6 (2021-08-26)
 
 ### Feats
diff --git a/CHANGELOG.zh-CN.md b/CHANGELOG.zh-CN.md
index 6ba5efb03..b32d229f0 100644
--- a/CHANGELOG.zh-CN.md
+++ b/CHANGELOG.zh-CN.md
@@ -6,6 +6,10 @@
 
 - `n-mention` 新增 `focus`、`blur` 方法
 
+### Fixes
+
+- 修复 `n-mention` 在 input 模式下菜单距离文字太远
+
 ## 2.16.6 (2021-08-26)
 
 ### Feats
@@ -17,7 +21,7 @@
 
 ### Fixes
 
-- 修复 `n-image` 切换图像后没有初始化 `rotate` 的问题，关闭 [#921](https://github.com/TuSimple/naive-ui/issues/921)
+- 修复 `n-image` 切换图像后没有初始化 `rotate`，关闭 [#921](https://github.com/TuSimple/naive-ui/issues/921)
 - 修复 `n-data-table` 的 loading 不在中间，关闭 [#929](https://github.com/TuSimple/naive-ui/issues/929)
 - 修复 `n-tree` 当 onLoad 回调没有添加 children 时抛出错误，关闭 [#772](https://github.com/TuSimple/naive-ui/issues/772)
 - 修复 `n-input` 当传递 `value=ref(0)` 时，同时显示 0 和占位符问题，关闭 [#914](https://github.com/TuSimple/naive-ui/issues/914)
diff --git a/src/mention/demos/enUS/manual-trigger.demo.md b/src/mention/demos/enUS/manual-trigger.demo.md
index 0332d70b5..2d53f1d56 100644
--- a/src/mention/demos/enUS/manual-trigger.demo.md
+++ b/src/mention/demos/enUS/manual-trigger.demo.md
@@ -1,6 +1,6 @@
-# Manual trigger
+# Manually Trigger Focus and Blur
 
-Maybe you want to trigger the `focus` and `blur` events manually.
+Maybe you want to trigger `focus` and `blur` manually.
 
 ```html
 <n-space>
diff --git a/src/mention/demos/zhCN/manual-trigger.demo.md b/src/mention/demos/zhCN/manual-trigger.demo.md
index 33ee1f6cc..4b4b6a214 100644
--- a/src/mention/demos/zhCN/manual-trigger.demo.md
+++ b/src/mention/demos/zhCN/manual-trigger.demo.md
@@ -1,6 +1,6 @@
-# 手动触发
+# 手动 Focus & Blur
 
-可能你想要手动触发 `focus` 和 `blur` 事件。
+可能你想要手动 `focus` 和 `blur`。
 
 ```html
 <n-space>
diff --git a/src/mention/src/utils.ts b/src/mention/src/utils.ts
index 739dbabb8..9ac880976 100644
--- a/src/mention/src/utils.ts
+++ b/src/mention/src/utils.ts
@@ -216,7 +216,9 @@ export function getRelativePosition (
     top: span.offsetTop + parseInt(computed.borderTopWidth),
     left: span.offsetLeft + parseInt(computed.borderLeftWidth),
     absolute: false,
-    height: parseInt(computed.lineHeight)
+    // We don't use line-height since it may be too large for position. Eg. 34px
+    // for input
+    height: parseInt(computed.fontSize) * 1.5
   }
 
   if (debug) {