bcakmakoglu / vue-flow

A highly customizable Flowchart component for Vue 3. Features seamless zoom & pan πŸ”Ž, additional components like a Minimap πŸ—Ί and utilities to interact with state and graph.

Home Page:https://vueflow.dev/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

πŸ› [BUG]: Using autocomplete in form inputs on a page with a vue-flow instance mounted causes crash in `isKeyMatch`

snoozbuster opened this issue Β· comments

Is there an existing issue for this?

  • I have searched the existing issues and this is a new bug.

Current Behavior

Using autofill in a form input on a page where a vue-flow is mounted causes a crash in isKeyMatch

Expected Behavior

No crash

Steps To Reproduce

Happens in Edge/Chrome 120 - other browsers may act differently.

  1. add this code inside the Panel in the "Basic example" on the examples page:
<form>
  <input name="foo" />
</form>
  1. Type something into the input and press enter to submit the form
  2. Focus the input after the preview has reloaded and use autocomplete to insert the text you entered
  3. Observe a crash in isKeyMatch because event.key and event.code are both undefined

Relevant log output

vue-flow-core.mjs:7874  Uncaught TypeError: Cannot read properties of undefined (reading 'toLowerCase')
    at isKeyMatch (vue-flow-core.mjs:7874:23)
    at vue-flow-core.mjs:7891:12
    at vue-flow-core.mjs:7929:18
    at listener (vue-flow-core.mjs:329:9)

Anything else?

Seems like in chrome, a keydown and keyup event are emitted on the input that was autofilled, but no key or code is given. I had no idea and that's janky AF! You may want to check in firefox (and safari if you have access) to see if they do something different here that also needs to be handled.

Interesting, I wonder if that relates to #1241 as it seems to be the same error πŸ€”

Will be fixed in 1.29.2

Fixed in 1.29.2

@bcakmakoglu yeah I think it should be the same error. I guess I should have actually checked the issues before checking the box πŸ˜… thanks for the quick fix!