Vue Multiselect Search Box Glitch - 框移动到屏幕的左上角

Question

我正在尝试在运行时（而不是在设计时）创建一个多选组件。以下是我正在尝试的示例代码。

我的多选选项：

const regions = ref([
   { label: 'Queensland', value: 'QLD' },
   { label: 'New South Wales', value: 'NSW' },
   { label: 'Victoria', value: 'VIC' },
   { label: 'Tasmania', value: 'TAS' },
   { label: 'South Australia', value: 'SA' }]);

我的动态组件创建如下：

const generateMultiSelectDynamically = (field: string) => {
   var el = document.createElement("div"); //create container for the app
   el.style.display = "inline"

   let selectedRegions = ref([]);
   var componentApp = createApp(
    MultiSelect, {
    maxSelectedLabels:1,
    options: regions.value,
    optionLabel:(v: any) => `${v.label}`,               
    placeholder: `region`,
    name: `region`,
    multiple:true,
    filter:true,
    modelValue: selectedRegions?.value,
    onChange: (event: any) => {
         selectedValues.value?.splice(0, selectedValues.value.length);
         event.value.forEach((element: any) => {
             selectedValues?.value?.push(element);
         });
   });

   componentApp.use(PrimeVue);  // Using PrimeVue
   componentApp.mount(el); //mount to DOM
   document.getElementById(field)!.appendChild(el);
   document.getElementById(field)!.appendChild(document.createTextNode(' '))
}

这是正确渲染。

但是当我通过鼠标点击选择一些值，然后在搜索框中放置一些文本时，组件移动到屏幕的左上角。

如果我在没有点击鼠标的情况下立即开始在搜索框中进行过滤，那么控件将保留在应有的位置。

总结

• 如果我点击一个选择，然后在搜索框中输入内容，然后控件会飞到左上角。
• 如果我点击控件，然后在搜索框中输入内容，那么控件就会停留在它应该在的位置。这也应该是第一种情况的理想行为。

我很困惑为什么控件会移动到左上角。有什么想法吗？