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 element-plus#16653
GUEThe · Apr 29, 2024 · 1699651 · 1699651
1 parent e75cee1
commit 1699651
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 3 deletions.
diff --git 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
@@ -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