Vue.js3 event @keydown.esc on text input is not triggered

Question

I have a text field with various events. All events are working, but not @keydown.esc.

I would like to differ between @blur and @keydown.esc. Escape should always do something and @blur only sometimes.

Found this code codepen.io/whitelynx/pen/wGvmdW that shows the key code for every key, but not for escape.

Is there anything special with @keydown.esc in vue js 3? That was not an issue in version 2.

My element

<input type="text" v-model="searchQuery" @keyup="searchItems" @paste="searchItems" @keydown.down="arrowDown" @keydown.up="arrowUp" @keydown.enter="selectIndex"
@keyup.,="selectIndex" @keydown.esc="closeSearch" @blur="maybeCloseSearch"
@focus="initSearch" placeholder="Search …" autocomplete="off" \>

I tried to remove all the other events and only @keydown.esc, but that makes no difference

Answer 1

"Solution": I found out that my browser extension Vimium i causes this problem

Answer 2

Fix the error:

wrong end of the input tag

    \>

Define all methods

It works!

Playground

const App = {
  data() { return { searchQuery: null } },
  methods: {
    initSearch: () => console.log('initSearch'),
    closeSearch: () => console.log('closeSearch'),
    maybeCloseSearch: () => console.log('maybeCloseSearch'),
  }
}
const app = Vue.createApp(App);
app.mount('#app');

#app { line-height: 2; }
[v-cloak] { display: none; }

<div id="app">
  <input type="text" v-model="searchQuery" @keydown.esc="closeSearch" @blur="maybeCloseSearch" @focus="initSearch" placeholder="Search …" autocomplete="off" />
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>