Fill search value with current selection on focus

Question

I am using v-select https://vue-select.org/ in my project. I'd like to have my search value filled with current selection on focus.

First step is: My first selection After I select the first option, I want to have my search value equal to the one I selected, now it shows as a placeholder not as an actual filled in search value and I cannot find a way to achieve that for now as I cannot set the search value on focus.

I also tried with :search or :autocomplete props but nothing seems to work.

  <vSelect
  v-if="addressSuggestions"
  v-model="checkoutStore.selectedAddress"
  label="tekst"
  :options="addressSuggestions"
  :autocomplete="checkoutStore.selectedAddress?.tekst"
  :search="checkoutStore.selectedAddress?.tekst"
  ...

Answer 1

Use v-model to get the selected value.

const { createApp, ref } = Vue;

const App = { 
  data() {
    return {
      options: ['Address 1', 'Address 123', 'Address 2', 'Address 3'],
      checkoutStore: { selectedAddress: null }
    }
  }
}
const app = createApp(App)
app.component('v-select', window['vue-select']);
app.mount('#app')

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

<div id="app" v-cloak>
   checkoutStore.selectedAddress: {{ checkoutStore.selectedAddress}}
  <v-select :options="options" v-model="checkoutStore.selectedAddress"></v-select>
</div>
<!-- include VueJS first -->
<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
<!-- use the latest vue-select release -->
<script src="https://unpkg.com/[email protected]"></script>
<link rel="stylesheet" href="https://unpkg.com/vue-select@latest/dist/vue-select.css">