Autocomplete keep focus on input with custom menu

[ssuess]

I have an input field I am using for searches, and I have attached a menu to it with autocomplete suggestions that are pulled from an API call and update dynamically as the user types more input. This all works as expected, but I can’t figure out how to keep focus on my input as the user is typing if the menu of choices is active. Here is my template code:

<q-input v-on:keyup.enter="searchMe(search);showing = false" @input="filterFn(search);showing = true;" @click="showing = true" v-model="search" filled type="search" style="width:100%;margin-top:0;">
    <template v-slot:append>
          <q-icon name="search" @click="searchMe(search)" style="cursor:pointer;"/>
        </template>
<q-menu auto-close v-if="ACreturnoptions && showing" fit anchor="top left" self="top left" class="suggest" :offset="[0, -50]">
  <template v-for="(parent, i) in ACreturnoptions">
  <q-item-label :key="`${parent.category}-${i}`" class="q-pa-sm">{{ parent.category }}</q-item-label>
  <q-separator :key="`${parent.category}-${i}`" />
  <template v-for="(child, index) in parent.suggestions">
  <q-item clickable @click.native="searchMe(child.value);" :key="`${i}-${index}`">
    <q-item-section>{{ child.label }}<q-item-label class="mlabel">{{ child.description }}</q-item-label></q-item-section>
  </q-item>
  </template>
  </template>
</q-menu>
</q-input>

I have also tried setting the v-model on the menu to showing, and various combos of setting showing to true/false based on input or clicks in the input field.

I just want the focus to remain on the input field while the user is typing, but still show the dropdown menu of choices (and its dynamic content updating as calls are made to the api). currently when the dropdown shows, the input field loses focus.

Any suggestions?

[ssuess]

Not sure if this is the best way, but I did the following and it seems to work:

1. I attached @show="setFocus()" to the q-menu
2. I run my method setFocus to set the focus to the my search input field

[ssuess]

Well, this is only a partial fix. Unfortunately this results in a slight keyboard pause when someone is entering data in the field when it is first triggered, meaning that key stroke is not captured. Any one have any suggestions?

[metalsadman]

Maybe post a pen of how you are doing it imo.

[ssuess]

I found out what was causing the delay. My methods on the input were checking if the platform was mobile first if (!this.$q.platform.is.mobile) { this.showing = true } before setting the menu to show, and that somehow was causing a delay. If I remove that check (and instead set the value of a data item to this.$q.platform.is.mobile) I can check against that in the template itself and it now works without delay, go figure.

[metalsadman]

@ssuess yep, and you never included that in your code above, always better to make a bare bones reproduction pen, so peeps can help out faster ;).