VueFlow is eating keys (don't reach a Panel text input field)

[crystalfp]

I have a Panel that contains a input text field. I'm almost sure that in some previous VueFlow version it worked correctly. Now I'm at version 1.44.0 and the field does not accept any key. The panel responds to click (I have also a button there) but not to keys.

<VueFlow :nodes :edges fit-view-on-init
                :delete-key-code="null"
                edges-updatable
                snap-to-grid
                :snap-grid="[30, 30]"
                :connection-mode="ConnectionMode.Strict"
                :connection-radius="30"
                @error="handleError"
                @edge-update="onEdgeUpdate"
                @connect="onConnect">

Removing the only key related configuration (delete-key-code) makes no difference.
Before opening an issue, is there any undocumented configuration that I should add?
Thanks!

[bcakmakoglu]

Seems to work fine for me in a sandbox: https://codesandbox.io/p/devbox/modest-poitras-g2n45y?file=%2Fsrc%2FApp.vue%3A18%2C26&workspaceId=ws_7iZPUfEyQC7Podbs7wwbxV

Can you create a repro of the issue?

[bcakmakoglu]

You can find a template here: http://new.vueflow.dev/ts

[bcakmakoglu]

Referencing the sandbox you had linked in your issue: https://codesandbox.io/p/devbox/mystifying-pond-frsn49?file=%2Fsrc%2FApp.vue%3A50%2C14

As I said in the issue, you haven't imported ConnectionMode nor Panel, so the sandbox is broken to begin with.
If you import <Panel> properly it will be elevated above the viewport and the input becomes clickable and typable.
Otherwise it's layered in the viewport and can't be interacted with:

Screen.Recording.2025-05-23.at.09.31.44.mov

[crystalfp]

Thanks for your patience! The problem was in my code, an addEventListener in the wrong place... Sorry for the noise.
Anyway, I imported Panel and ConnectionMode in the codesandbox and indeed everything works.
Could you clarify only your words "If you import properly"? It means simply to import it from "@vue-flow/core"? Or there is a specific place to put inside ?
Thanks again!
mario

[bcakmakoglu]

Could you clarify only your words "If you import properly"?

Yeah, I meant if you add import { ConnectionMode, Panel } from '@vue-flow/core' 😄

Glad to hear your issue is fixed 👍