[Component] [popover] popover弹框中有select选择器，操作选择器popover也一同消失消失

[luoyuchen]

Bug Type: Component

Environment

• Vue Version: 3.2.45
• Element Plus Version: 2.2.28
• Browser / OS: chrome/win10
• Build Tool: Vite

Reproduction

Related Component

• el-popover

Reproduction Link

Element Plus Playground

Steps to reproduce

<template>
  <el-button ref="buttonRef" v-click-outside="onClickOutside"
    >Click me</el-button
  >

  <el-popover
    ref="popoverRef"
    :virtual-ref="buttonRef"
    trigger="click"
    title="With title"
    virtual-triggering
  >
    <el-select  multiple  v-model="value" class="m-2" placeholder="Select" size="large">
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value"
    />
  </el-select>
  </el-popover>
  <el-popover
    placement="bottom"
    title="Title"
    :width="200"
    trigger="click"
    
  >
    <el-select  v-model="value" class="m-2" placeholder="Select" size="large">
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value"
    />
  </el-select>
    <template #reference>
      <el-button class="m-2">Click to activate</el-button>
    </template>
  </el-popover>
</template>

<script setup lang="ts">
import { ref, unref } from 'vue'
import { ClickOutside as vClickOutside } from 'element-plus'
const buttonRef = ref()
const popoverRef = ref()
const onClickOutside = () => {
  unref(popoverRef).popperRef?.delayHide?.()
}
const value = ref('')

const options = [
  {
    value: 'Option1',
    label: 'Option1',
  },
  {
    value: 'Option2',
    label: 'Option2',
  },
  {
    value: 'Option3',
    label: 'Option3',
  },
  {
    value: 'Option4',
    label: 'Option4',
  },
  {
    value: 'Option5',
    label: 'Option5',
  },
]
</script>

What is Expected?

选择select，popper不消失

What is actually happening?

选择select，popper消失

Additional comments

(empty)

[LQ6666666]

popper-append-to-body(已废弃)改成 teleported

[trry-hub]

解决了么

[xw-xw12]

下拉需要设置:teleported="false"

<div ref="tempContentRef"  v-click-outside="close">
function close(e) { 
    if (!tempContentRef.value.contains(e.target)) { 
       toValue(propJsonSchemaRef)?.hide() 
    } 
}

[raisiqueira]

Just improving the example from @xw-xw12:

// <script> block
const visible = ref(false);
  /** @type {import('element-plus').PopoverInstance} */
  const popoverRef = ref(null);

const onClickOutside = (event) => {
  const contentRef = unref(popoverRef).popperRef?.contentRef;
  if (!contentRef.contains(event.target)) {
    visible.value = false;
  }
 };

<!-- <template> block -->
<el-button v-popover="popoverRef" v-click-outside="onClickOutside">
Open Popover
</el-button>

<el-popover
        ref="popoverRef"
        :visible="visible"
        placement="bottom"
        width="450"
        virtual-triggering
        persistent
      >
Popover content
</el-popover>

For some reason, when calling the hide method from the popover ref, the visible ref doesn't have your value changed. To workaround it, I updated the value of the visible ref to false.