blur method doesn't work on mobile

[AoooR42]

Hello, I have a q-select with use-input property. I want the q-select to lose focus when a value is clicked. So I have a watch on the v-model variable of the q-select and a ref to the q-select, and when de v-model value is updated I call blur method on the q-select. It works on a computer (with firefox at least), my component is unselected when I click on an item, but on my mobile (with chrome), the blur method seems to do nothing, the keyboard is still here after I click on an item, and the component is still focused.

Thank you for your help, I let a minimal code example :

<template>
  <q-select
    type="text"
    ref="locationSelect"
    use-input
    @popup-show="resetContent"
    @input-value="findAddresses"
    v-model="address"
    option-id="placeId"
    option-label="formatted"
    :options="suggestedAdresses"
    :label="t('location')"
    outlined
    dense
    class="q-mb-xs"
  >
    <template v-slot:no-option>
      <q-item>
        <q-item-section class="text-grey">
          {{ t('noResults') }}
        </q-item-section>
      </q-item>
    </template>
  </q-select>
</template>

<script setup lang="ts">
import { computed, onMounted, ref, watch } from 'vue';

const locationSelect = ref<HTMLDivElement>();
const address = ref<MapInfoModel>();
const suggestedAdresses = ref<MapInfoModel[]>([]);

watch(address, (currentValue, oldValue) => {
  if (currentValue === undefined) {
    return;
  }
  locationSelect.value!.blur();
})

function resetContent() {
  address.value = undefined;
}
</script>

[MilosPaunovic]

Try to listen to @touchend event instead of @click for mobile devices.

[AoooR42]

The @touchend event is usefull to detect when I have to focus out the component, but it is not my problem. With watch on my v-model I can already detect when a v-mdoel is clicked/touched (it works well on mobile too). The problem is how to focus out the component ? .blur() only works on computer.

[AoooR42]

I found a solution, I use nextTick function from vue :

nextTick(() => locationSelect.value!.blur());