1

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

Tolbxela
  • 4,767
  • 3
  • 21
  • 42
Daniel
  • 31
  • 4

2 Answers2

2

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

Daniel
  • 31
  • 4
1

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>
Tolbxela
  • 4,767
  • 3
  • 21
  • 42
  • Thanks for the response. Two things: This handles the comma event: @keyup.,="selectIndex" I testet your code snippet. keydown.esc triggers maybeCloseSearch not closeSearch. The same behaviour is on codepen.io/whitelynx/pen/wGvmdW. – Daniel Feb 14 '23 at 17:42
  • I guess, this is some problem with your browser. It does work as intended with my setup (Win10+Chrome|Edge.). ESC fires `closeSearch`. Do you use Safari? – Tolbxela Feb 14 '23 at 17:48
  • I am using Chrome on Mac – Daniel Feb 14 '23 at 17:53
  • Then it could be Mac problem. Sorry, have no experience with Macs – Tolbxela Feb 14 '23 at 17:54
  • But its working i Safari – Daniel Feb 14 '23 at 17:59
  • 1
    @Tolbxela, according to [this](https://v3-migration.vuejs.org/breaking-changes/keycode-modifiers.html#migration-strategy), `@keyup.,` is valid. The list of invalid key modifiers is `"`, `'`, `/`, `=`, `>`, and `.`. – tao Feb 14 '23 at 23:10
  • You are right @tao. Thanks for notice! I have updated my answer. – Tolbxela Feb 17 '23 at 09:53