How can I detect if the viewport (entire canvas including nodes) are in focus ?

[gitHoussem]

Hi Team,
I am trying to find a way to know if the viewport (white pane + nodes + any element in the vueflow viewport) is in focus to be able to scope my keyboard shortcuts only to the canvas. I can't seem to find a way for that.

To be exact, I want to be able to do CRTL A/ and CTRL C to select all nodes and copy all nodes But I need the ctrl A and ctrl C to be scoped only on the viewport if the user has it on focus (and not do it in other inputs in the app)

The best I was able to do, is using vueuse/useFocusWithin but it is only able to detect that I am focused on the vueflow port If I click on a node.
Here is the sample code:

<template>
    <div id="designer-canvas" ref="vueFlowCanvas">
       <!-- VueFlowDiagram component has the <VueFlow> instance -->
      <VueFlowDiagram ref="modelDesigner" />
      <MiniMap pannable zoomable />
    </div>
</template>
<script setup lang="ts">
  import { useFocusWithin } from "@vueuse/core";
  import { watch } from "vue";

  const vueFlowCanvas = ref<HTMLElement | null>(null);
  const { focused } = useFocusWithin(vueFlowCanvas);
  watch(focused, (isFocused) => {
    console.log("Designer focus changed:", isFocused);
  });
</script>

CleanShot.2025-10-30.at.12.07.55.mp4

• I tried setting the ref in <VueFlowDiagram> and <VueFlow> same behavior (no luck!)
• I was wondering, is there a state or an event internal to VueFlow that detects if the instance (any any of its children) are in focus)

Thank you

[bcakmakoglu]

Problem here is that the Pane element is not focusable, thus you never see a "focusin" event happening when you click it.
Might add a tabIndex property to the Pane so it becomes focusable.