PrimeVue OverlayPanel在await后调用show方法无法弹出求助

问题场景 #

使用PrimeVue的OverlayPanel组件时，在异步请求（await Service.fetchData）之后调用op.value.show(e)，弹窗无法弹出；但把show()放在await之前则可正常显示。

相关代码：

<template>
    <button @click="search">
        show
    </button>

    <OverlayPanel ref="op" appendTo="body">
        {{ data }}
    </OverlayPanel>
</template>

<script setup lang="ts">
import OverlayPanel from 'primevue/overlaypanel';
import { ref } from 'vue';

const op = ref();
const data = ref();

// 无法正常弹出的代码
const search = async (e: Event) => {
    const response = await Service.fetchData('');
    op.value.show(e);
};

// 可以正常弹出的代码
// const search = async (e: Event) => {
//     op.value.show(e);
//     const response = await Service.fetchData('');
// };
</script>

问题原因 #

await会将后续代码推入事件循环的下一轮执行，此时原点击事件的Event对象已被浏览器回收或状态失效。OverlayPanel的show()方法依赖事件对象的坐标信息（如clientX/clientY）来定位弹窗，失效的事件对象无法提供这些关键数据，导致弹窗无法正确渲染显示。

解决方案 #

提前提取事件中的坐标信息，在异步请求完成后，用保存的坐标构造模拟事件对象传入show()：

const search = async (e: Event) => {
    // 提取点击事件的坐标（断言为MouseEvent，适配按钮点击场景）
    const { clientX, clientY } = e as MouseEvent;
    // 执行异步请求并更新数据
    const response = await Service.fetchData('');
    data.value = response.data;
    // 使用保存的坐标触发弹窗
    op.value.show({ clientX, clientY } as MouseEvent);
};

如果不需要基于点击位置弹窗，也可以直接调用show()不传参数（弹窗会默认显示在组件挂载位置），但这种方式可能不符合交互预期：

const search = async (e: Event) => {
    const response = await Service.fetchData('');
    data.value = response.data;
    op.value.show();
};

内容的提问来源于stack exchange，提问作者pedroPG