Opening OverlayPanel with a key press

[erlebach]

Here is a MWE of an OverlayPanel modeled after the example on the PrimeVue (Vue 3) website. When I click on the button, the `Hello World` message appear as expected. However, when I hit the `h key`, I would like the same thing to happen. I call the exact same `toggle` function invoked with the click. I get the error message (shown below the template source code). Any help and insight is greatly appreciated. (I would love to package a functioning program in a single file, but at this point in time, ,I do not know how.)

Code: Select all

<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>

Error message when hitting the `h key`:

Code: Select all

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)

[tugce.kucukoglu]

Hi,

Sorry for the late answer. OverlayPanel get positioned to a target. When you add event listener to window, OverlayPanel can not find the target because 'getBoundingClientRect' method works for a positioned element and window actually is not an element. So OverlayPanel fails.