Vuetify Combobox - open dropdown on icon click

Question

I'm trying to create a search input field with a history of previous searches on a dropdown, like, for example the search field in the Intellij editor.

I'm new to Vuetify and from what I can see so far it looks like Combobox is the best component to use.

I would like the dropdown to only open if you click the dropdown icon. At the moment the dropdown opens when you click in the text input field. From the documentation is looks like prop :menu-props="{openOnClick: false}" might be what I need, but it doesn't seem to work.

Can anyone give me pointer in the right direction?

https://codepen.io/damianhelme/pen/zMXJvb

<v-combobox
   v-model="search"
   :items="searchHistory"
   label="Search"
   :menu-props="{openOnClick: false}"
></v-combobox>

new Vue({
  el: '#app',
  data () {
    return {
      search: '',
      searchHistory: [
        'Apple',
        'Banana',
        'Pear'
      ]
    }
  }
})

Thanks.

Answer 1

EDIT:
Updated pen with custom append slot to deal with icon state:
https://codepen.io/anon/pen/KrjzRL

---

If you want to open (and close) the combobox only on icon-click, try this trick:

<v-combobox
    :menu-props="{value: autoselectMenu}"
    @click:append="toggle"
></v-combobox>

Pass custom value to menu - this indicates whether menu should be opened/closed.
Then change that value only on icon-click by using :append-icon-cb prop.

data () {
  return {
    autoselectMenu: false,
// ...
methods: {
  toggle() {
    this.autoselectMenu = !this.autoselectMenu
  }
// ...

So for any other case when you want to open or close the menu, just change that custom value i.e. autoselectMenu.

codepen