From ce1351db35f328ab6cfe5073782896defdc4c65e Mon Sep 17 00:00:00 2001
From: liusuY <l851209312@163.com>
Date: Sun, 4 Sep 2022 18:18:26 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=20#1292?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/devui-vue/devui/mention/src/mention.tsx | 16 +++++++++++-----
 1 file changed, 11 insertions(+), 5 deletions(-)

diff --git a/packages/devui-vue/devui/mention/src/mention.tsx b/packages/devui-vue/devui/mention/src/mention.tsx
index 181cc9732e..adc931280e 100644
--- a/packages/devui-vue/devui/mention/src/mention.tsx
+++ b/packages/devui-vue/devui/mention/src/mention.tsx
@@ -46,10 +46,14 @@ export default defineComponent({
       emit('change', val.slice(1));
     }, 300);
 
-    const handleBlur = () => {
-      setTimeout(() => {
-        showSuggestions.value = false;
-      }, 100);
+    const handleBlur = (e: Event) => {
+      const { target } = e;
+      const ele = document.querySelector('.devui-mention');
+      if (!(ele?.contains(target as Element))) {
+        setTimeout(() => {
+          showSuggestions.value = false;
+        }, 100);
+      }
     };
 
     const handleFocus = () => {
@@ -116,17 +120,19 @@ export default defineComponent({
     onMounted(() => {
       window.addEventListener('keydown', arrowKeyDown);
       window.addEventListener('keydown', enterKeyDown);
+      document.addEventListener('click', handleBlur);
     });
 
     onUnmounted(() => {
       window.removeEventListener('keydown', arrowKeyDown);
       window.removeEventListener('keydown', enterKeyDown);
+      document.removeEventListener('click', handleBlur);
     });
 
     return () => {
       return (
         <div class={ns.b()}>
-          <d-textarea v-model={textContext.value} onUpdate={handleUpdate} onBlur={handleBlur} onFocus={handleFocus}></d-textarea>
+          <d-textarea v-model={textContext.value} onUpdate={handleUpdate} onFocus={handleFocus}></d-textarea>
           {showSuggestions.value ? (
             loading.value ? (
               <div class={[`${ns.e('suggestions')} ${ns.e('suggestions-loading')}`]}>加载中... </div>