fix(mention): menu is too far from text in input mode

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

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)

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>

src/mention/demos/zhCN/manual-trigger.demo.md

@@ -1,6 +1,6 @@
-# 手动触发
+# 手动 Focus & Blur
 
-可能你想要手动触发 `focus` 和 `blur` 事件。
+可能你想要手动 `focus` 和 `blur`。
 
 ```html
 <n-space>

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) {