🐛 [Bug]: After adding the draggable attribute to the dialog box and using it with the form drop-down component, dragging the dialog box will cause the drop-down box positioning to fail.

[thestar077]

Version

3.10.0

Vue Version

3.2.47

Link to minimal reproduction

对话框增加draggable属性配合表单下拉组件使用后，拖拽对话框，这时下拉框定位失效

Step to reproduce

<template>
  <div>
    <tiny-button @click="boxVisibility = true">弹出表单</tiny-button>
    <tiny-dialog-box
      :visible="boxVisibility"
      @update:visible="boxVisibility = $event"
      title="消息"
      width="30%"
      :draggable="true"
      :is-form-reset="false"
    >
      <tiny-form :model="formData" label-width="100px" label-position="top">
       <tiny-select v-model="value" placeholder="请选择">
    <tiny-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>
  </tiny-select>
        <tiny-form-item label="人员姓名" prop="name">
          <tiny-input type="text" v-model="formData.name"></tiny-input>
        </tiny-form-item>
        <tiny-form-item label="岗位" prop="type">
          <tiny-radio-group v-model="formData.type">
            <tiny-radio :label="0">研发</tiny-radio>
            <tiny-radio :label="1">非研发</tiny-radio>
          </tiny-radio-group>
        </tiny-form-item>
        <tiny-form-item label="特长" prop="goodAt">
          <tiny-checkbox :indeterminate="isIndeterminate" v-model="checkAll">全部</tiny-checkbox>
          <tiny-checkbox-group v-model="formData.goodAt">
            <tiny-checkbox
              v-for="(goodAtItem, index) in goodAtOptions[formData.type]"
              :label="goodAtItem"
              :key="goodAtItem + index"
              >{{ goodAtItem }}</tiny-checkbox
            >
          </tiny-checkbox-group>
        </tiny-form-item>
      </tiny-form>
      <template #footer>
        <tiny-button type="primary" :loading="btnSubmit.loading" @click="handleSubmit">{{
          btnSubmit.text[btnSubmit.loading]
        }}</tiny-button>
      </template>
    </tiny-dialog-box>
  </div>
</template>

<script setup lang="jsx">
import { ref, computed } from 'vue'
import {
  Button as TinyButton,
  DialogBox as TinyDialogBox,
  Form as TinyForm,
  FormItem as TinyFormItem,
  Input as TinyInput,
  Radio as TinyRadio,
  RadioGroup as TinyRadioGroup,
  Checkbox as TinyCheckbox,
  CheckboxGroup as TinyCheckboxGroup,
  Select as TinySelect, Option as TinyOption
} from '@opentiny/vue'

const options = ref([
  { value: '选项1', label: '黄金糕' },
  { value: '选项2', label: '双皮奶' },
  { value: '选项3', label: '蚵仔煎' },
  { value: '选项4', label: '龙须面' },
  { value: '选项5', label: '北京烤鸭' }
])
const value = ref('')
const btnSubmit = ref({
  loading: false,
  text: {
    true: '提交中',
    false: '确定'
  }
})
const boxVisibility = ref(false)
const formData = ref({
  name: '',
  type: 0,
  goodAt: []
})
const goodAtOptions = ref([
  ['架构', '算法', '自动化'],
  ['UI设计', 'EXCEL', 'PPT制作']
])
const checkAll = computed({
  get() {
    return formData.value.goodAt.length === goodAtOptions.value[formData.value.type].length
  },
  set(val) {
    formData.value.goodAt = val ? [...goodAtOptions.value[formData.value.type]] : []
  }
})
const isIndeterminate = computed({
  get() {
    return (
      formData.value.goodAt.length > 0 && formData.value.goodAt.length < goodAtOptions.value[formData.value.type].length
    )
  }
})

function handleSubmit() {
  btnSubmit.value.loading = true
  mockPost().then((response) => {
    if (response.status === 200) {
      btnSubmit.value.loading = false
      boxVisibility.value = false
      Notify({
        title: '成功',
        message: '表单已成功提交！',
        offset: 0
      })
    }
  })
}

function mockPost() {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve({ status: 200 })
    }, 800)
  })
}

function resetForm() {
  formData.value = {
    name: '',
    type: 0,
    goodAt: []
  }
}
</script>

What is expected

No response

What is actually happening

No response

Any additional comments (optional)

No response

[Issues-translate-bot]

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

---

Title: 🐛 [Bug]: After adding the draggable attribute to the dialog box to cooperate with the drop-down component of the form, drag the dialog box, and the positioning of the drop-down box will fail

[Issues-translate-bot]

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

---

@kagol whether to consider adjusting the clickoutside command of the drop-down component to the mousedown event and trigger the Handler

[shenjunjian]

在最新版本3.11中，验证未发现下拉框定位失效。你可以升级版本试试

[Issues-translate-bot]

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

---

In the latest version 3.11, the verification did not find that the positioning of the drop-down box was invalid. You can try upgrading the version