🐛 [Bug]: dialog-box下拉框右上角按钮关闭时，下拉框选项不消失

[Lymanli]

Version

3.16.0

Vue Version

3.4.27

Link to minimal reproduction

https://opentiny.design/vue-playground?cmpId=dialog-box&fileName=close-on-click-modal.vue&apiMode=Options&mode=pc&theme=default

<template>
  <div>
    <tiny-button @click="boxVisibility = true" title="弹出 Dialog">弹出 Dialog</tiny-button>
    <tiny-dialog-box v-model:visible="boxVisibility" :close-on-click-modal="false" title="消息" width="30%">
      <span>dialog-box 内容</span>
      <tiny-select v-model="selectData" :options="selectOptions"></tiny-select>
      <div style="height:300px"></div>
      <template #footer>
        <tiny-button type="primary" @click="boxVisibility = false">确 定</tiny-button>
      </template>
    </tiny-dialog-box>
  </div>
</template>

<script lang="jsx">
import { Button, DialogBox,Select } from '@opentiny/vue'

export default {
  components: {
    TinyButton: Button,
    TinyDialogBox: DialogBox,
    TinySelect:Select
  },
  data() {
    return {
      boxVisibility: false,
      selectData:'',
      selectOptions:[
        {
          label:'aaa',
          value:'aaa'
        },
        {
          label:'bbb',
          value:'bbb'
        },
        {
          label:'ccc',
          value:'ccc'
        },
        {
          label:'ddd',
          value:'ddd'
        },
      ]
    }
  }
}
</script>

Step to reproduce

• 点击【弹出 Dialog】按钮
• 点击下拉框，使下拉选项显示
• 点击dialog-box对话框右上角关闭图标×

What is expected

点击dialog-box对话框右上角关闭图标×时，展开的下拉框选项随着对话框消失而消失

What is actually happening

对话框关闭后对话框消失，下拉框选项仍停留在页面显示

What is your project name

dialog-box对话框、select选择器

Any additional comments (optional)

No response

[Issues-translate-bot]

Bot detected the issue body's language is not English, translate it automatically.

---

Title: 🐛 [Bug]: When the button in the upper right corner of the dialog-box drop-down box is closed, the drop-down box options do not disappear

[James-9696]

我先出个方案，修改后再告知

[Issues-translate-bot]

Bot detected the issue body's language is not English, translate it automatically.

---

I'll make a plan first and let you know after revising it

[James-9696]

此问题分析：因为在弹窗中点击了下拉框，却触发change事件去选中值，导致点击close关闭图标后，下拉选项还存在。

[Issues-translate-bot]

Bot detected the issue body's language is not English, translate it automatically.

---

Analysis of this problem: Because the drop-down box was clicked in the pop-up window, but the change event was triggered to select the value, the drop-down option still existed after clicking close to close the icon.

[James-9696]

解决办法： 在select添加v-if操作，与dialog的关闭和显示保持一致即可解决，boxVisibility为false表示弹窗关闭，true为显示。

[shenjunjian]

原因比较简单： 默认关闭时，不销毁对话框和它内部的组件的。 select不销毁，所以它的popper出来的元素也就没有隐藏的触发时机。 （select的popper的dom通常是 appendToBody的， 并不在select的dom之中，所以不会一起隐藏） 也不太算是bug。

解决办法： 1、 像上面那样加v-if， 在关闭事件中，用户自己通过变量控制select 2、 或者给select 添加 ref="selRef" ，然后调用 this.$refs.selRef.blur() 或其它关闭下拉方法。 3、 直接添加destroy-on-close，一劳永逸。