From c094ab4990f777b4cb258a0bbe156d27e89a9375 Mon Sep 17 00:00:00 2001
From: aaronmhl <130202696+aaronmhl@users.noreply.github.com>
Date: Fri, 10 May 2024 17:29:17 +0800
Subject: [PATCH] =?UTF-8?q?fix(dropdown-menu):=20=E4=BF=AE=E5=A4=8D?=
 =?UTF-8?q?=E7=82=B9=E5=87=BB=E4=B8=8B=E6=8B=89=E6=A1=86=E4=BB=A5=E5=A4=96?=
 =?UTF-8?q?=E5=8C=BA=E5=9F=9F=E4=B8=8B=E6=8B=89=E6=A1=86=E9=9C=80=E8=A6=81?=
 =?UTF-8?q?=E6=94=B6=E8=B5=B7=E9=97=AE=E9=A2=98=20(#1369)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* fix(dropdown-menu): 修复点击下拉框以外区域下拉框需要收起问题

* fix(dropdown-menu): 修复点击下拉框以外区域下拉框需要收起问题
---
 src/dropdown-menu/context.ts        | 2 +-
 src/dropdown-menu/dropdown-item.tsx | 1 +
 src/dropdown-menu/dropdown-menu.tsx | 9 ++++++++-
 3 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/src/dropdown-menu/context.ts b/src/dropdown-menu/context.ts
index 4c4d3d118..70e017104 100644
--- a/src/dropdown-menu/context.ts
+++ b/src/dropdown-menu/context.ts
@@ -1,4 +1,4 @@
-export type TriggerSource = 'overlay' | 'menu' | 'content' | 'confirm';
+export type TriggerSource = 'overlay' | 'menu' | 'content' | 'confirm' | 'outside';
 
 export type DropdownMenuDo = () => void;
 
diff --git a/src/dropdown-menu/dropdown-item.tsx b/src/dropdown-menu/dropdown-item.tsx
index 1f51e205e..45c61803c 100644
--- a/src/dropdown-menu/dropdown-item.tsx
+++ b/src/dropdown-menu/dropdown-item.tsx
@@ -283,6 +283,7 @@ export default defineComponent({
       const content = renderContent('default', 'content');
 
       const footer = renderTNodeJSX('footer');
+
       return (
         wrapperVisible.value && (
           <div id={popupId} class={classes.value} style={{ ...expandStyle.value }}>
diff --git a/src/dropdown-menu/dropdown-menu.tsx b/src/dropdown-menu/dropdown-menu.tsx
index df42c659e..276aa4a21 100644
--- a/src/dropdown-menu/dropdown-menu.tsx
+++ b/src/dropdown-menu/dropdown-menu.tsx
@@ -1,5 +1,5 @@
 import { defineComponent, computed, ref, reactive, watch, provide } from 'vue';
-
+import { onClickOutside } from '@vueuse/core';
 import { CaretDownSmallIcon, CaretUpSmallIcon } from 'tdesign-icons-vue-next';
 import camelCase from 'lodash/camelCase';
 
@@ -133,6 +133,13 @@ export default defineComponent({
       const container = findRelativeContainer(bar) || document.body;
       menuContext.recordMenuExpanded(container, control, DropdownMenuExpandState.collapsed);
     };
+
+    // dropdown-menu外面点击触发dropdown下拉框收起
+    onClickOutside(refBar, () => {
+      collapseMenu();
+      props.onMenuClosed?.({ trigger: 'outside' });
+    });
+
     const control: DropdownMenuControl = {
       expandMenu,
       collapseMenu,