Vuetify 3: Clear Autocomplete after keydownEnter while keeping it focused

Question

I want to clear the v-autocomplete after the user has pressed enter, without bluring (exiting) the autocomplete.

The only (somewhat) working solution for vuefiy 3 I've found was this answer to a similar question (maybe even a duplicate, but it does not seem to run into the same problem as I do)

I build a solution that is as close to my project as possible here. As you can see, clearing the autocomplete works for the most part, but the placeholder is not shown after clear. But since I used the blur event (which is the only way I found the clear to work, as the DOM is only updated on blur, even if I set the model to null beforehand) the field is not focused anymore. Even dispatching a focusIn event does not yield the result I wanted.

Answer 1

Similar to the other question you linked, you'll specifically want to clear the search input text, not just the v-model. The Vuetify 3 documentation is not 100% correct (at the time of writing this) on how this can be done. It lists a prop just called search that controls the text input, but it's actually v-model:search. You can use this to clear the input during your keydown event.

data() {
  return {
    items: ['a', 'b', 'c'],
    aModel: '',
    search: '',
  };
},
methods: {
  aMethod() {
    // Do Something with the Model
    let x = this.aModel;

    //Then clear input
    this.aModel = '';
    this.search = '';
  },
},

<v-autocomplete
  :items="items"
  v-model="aModel"
  v-model:search="search"
  auto-select-first
  class="flex-full-width"
  density="comfortable"
  placeholder="test"
  @keydown.enter="aMethod"
></v-autocomplete>

updated StackBlitz