javascript - キーを押して OverlayPanel を開く方法

Question

これは、PrimeVue (Vue 3) Web サイトの例をモデルにした OverlayPanel の MWE です。ボタンをクリックHello Worldすると、期待どおりにメッセージが表示されます。ただし、h keyを押すと、同じことが起こります。クリックで呼び出されるのとまったく同じtoggle関数を呼び出します。エラー メッセージが表示されます (テンプレート ソース コードの下に表示)。どんな助けと洞察も大歓迎です。(機能するプログラムを 1 つのファイルにパッケージ化したいのですが、現時点では方法がわかりません。)

<template>
  <div>
    <Toast />
    <Button :label="true ? 'SelectProduct' : null" @click="toggle" />
    <OverlayPanel ref="op">
      <h1>Hello!</h1>
    </OverlayPanel>
  </div>
</template>

<script>
import { ref } from "vue";
import { useToast } from "primevue/usetoast";
import OverlayPanel from "primevue/overlaypanel";
import Button from "primevue/button";

export default {
  components: { OverlayPanel, Button },
  setup() {
    const toast = useToast();
    const op = ref();

    let onKeydown = (event) => {
      if (event.key == "h") {
        op.value.toggle(event);
      }
    };

    window.addEventListener("keydown", onKeydown);
    () => window.removeEventListener("keydown", onKeydown);

    const toggle = (event) => {
      op.value.toggle(event);
    };

    return { op, toggle };
  },
};
</script>

を押したときのエラーメッセージは次のh keyとおりです。

utils.esm.js:186 Uncaught (in promise) TypeError: target.getBoundingClientRect is not a function
    at Function.absolutePosition (utils.esm.js:186)
    at Proxy.alignOverlay (overlaypanel.esm.js:138)
    at Proxy.onEnter (overlaypanel.esm.js:105)
    at callHook (runtime-dom.esm-bundler.js:784)
    at eval (runtime-dom.esm-bundler.js:827)
    at Object.enter (runtime-core.esm-bundler.js:2473)
    at Array.eval (runtime-core.esm-bundler.js:4924)
    at flushPostFlushCbs (runtime-core.esm-bundler.js:479)
    at flushJobs (runtime-core.esm-bundler.js:515)