From 7d749c50676d6ac9d6d59df0b0eea741a4072173 Mon Sep 17 00:00:00 2001
From: GUEThe <guethejq@gmail.com>
Date: Mon, 29 Apr 2024 21:41:35 +0800
Subject: [PATCH] fix(components): [select-v2] with teleported="false" dropdown
 closes bug

Expose listContainerRef, when 'click' event is form listContainerRef and teleported is'false',return
'toggleMenu' function.

closed #16653
---
 packages/components/select-v2/src/select-dropdown.tsx | 4 +++-
 packages/components/select-v2/src/useSelect.ts        | 9 +++++++--
 2 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/packages/components/select-v2/src/select-dropdown.tsx b/packages/components/select-v2/src/select-dropdown.tsx
index e4d324f052bf44..463eb1cf52fce6 100644
--- a/packages/components/select-v2/src/select-dropdown.tsx
+++ b/packages/components/select-v2/src/select-dropdown.tsx
@@ -42,7 +42,7 @@ export default defineComponent({
     const { getLabel, getValue, getDisabled } = useProps(select.props)
 
     const cachedHeights = ref<Array<number>>([])
-
+    const listContainerRef = ref<HTMLDivElement>()
     const listRef = ref()
 
     const size = computed(() => props.data.length)
@@ -129,6 +129,7 @@ export default defineComponent({
     }
 
     expose({
+      listContainerRef,
       listRef,
       isSized,
 
@@ -230,6 +231,7 @@ export default defineComponent({
 
       return (
         <div
+          ref={listContainerRef}
           class={[ns.b('dropdown'), ns.is('multiple', multiple)]}
           style={{
             width: `${width}px`,
diff --git a/packages/components/select-v2/src/useSelect.ts b/packages/components/select-v2/src/useSelect.ts
index 1dc2ca718b752e..bee77501046c0c 100644
--- a/packages/components/select-v2/src/useSelect.ts
+++ b/packages/components/select-v2/src/useSelect.ts
@@ -365,9 +365,14 @@ const useSelect = (props: ISelectV2Props, emit) => {
   } = useInput((e) => onInput(e))
 
   // methods
-  const toggleMenu = () => {
+  const toggleMenu = (event: MouseEvent) => {
     if (selectDisabled.value) return
-
+    if (
+      props.teleported === false &&
+      menuRef.value.listContainerRef.contains(event.target)
+    ) {
+      return
+    }
     if (states.menuVisibleOnFocus) {
       // controlled by automaticDropdown
       states.menuVisibleOnFocus = false