How to keep popup of Quasar Select component open?

[jimmiejackson414]

I've got a more in-depth StackOverflow question over here but wanted to post here as well since it's a more specific community.

Essentially I'm populating a q-select options via an API call, attempting to allow the user to search for their address. I'm very close to finishing it, however the one remaining issue is an odd quirk (again, described more in-depth in the SO post).

The gist is that after performing a search, the options are populated correctly, but the popup doesn't display. If I click on the chevron twice, the popup opens and displays all of the options. What could be the issue here, and why isn't programmatically opening it via the showPopup() method working?

<template>
  <q-select
    ref="geolocateRef"
    v-model="state.location"
    :options="state.locations"
    :loading="state.loadingResults"
    clear-icon="clear"
    dropdown-icon="expand_more"
    clearable
    outlined
    :use-input="!state.location"
    dense
    label="Location (optional)"
    @clear="state.locations = undefined"
    @input-value="fetchOptions">
      <template #prepend>
        <q-icon name="place " />
      </template>
      <template #no-option>
        <q-item>
          <q-item-section class="text-grey">
            No results
          </q-item-section>
        </q-item>
      </template>
    </q-select>
</template>

<script lang='ts' setup>
  import { reactive } from 'vue';
  import { debounce, QSelect } from 'quasar';
  import { fetchGeocodeResults } from '@/services';

  const state = reactive({
    location: undefined as string | undefined,
    locations: undefined,
    loadingResults: false,
    geolocateRef: null as QSelect | null,
  });

  const fetchOptions = debounce(async (value: string) => {
    if (value) {
      state.loadingResults = true;
      const results = await fetchGeocodeResults(value);

      state.locations = results.items.map(item => ({
        label: item.title,
        value: JSON.stringify(item.position),
      }));

      state.loadingResults = false;
      state.geolocateRef?.showPopup(); // doesn't work?
    }
  }, 500);
</script>

[yusufkandemir]

It is hard to understand the behavior without actually having it on our hands. Please share a repro using one of:

• https://codepen.quasar.dev/
• https://jsfiddle.quasar.dev/
• https://codesandbox.quasar.dev/

If your service logic needs a private/local server, then mock it up by wrapping it in a promise that resolves on setTimeout, just like in Quasar docs on server-side related examples.

[jimmiejackson414]

Sure thing! I've got a working repro here.

[metalsadman]

@jimmiejackson414 convert your QSelect template ref into a ref either using toRefs or just take it out of your state object and declare it as a ref, you also need to call QSelect's refresh method after you populated your options array.

https://codesandbox.io/s/relaxed-wilson-zdhpqn?file=/src/pages/Index.vue

IMO, using @filter event could be more appropriate here, and the things you are doing with handling loading states, refreshing, debouncing input etc... are mostly done ootb already. see https://codepen.io/metalsadman/pen/wvPQZZV.

[jimmiejackson414]

Brilliant! Seems like it was mostly a classic case of me trying to overcomplicate it. This is my first time using Quasar and it's continually impressing me with its built-in features.

Both of those fixes provided worked perfectly for me, but in the interest in simplifying a bit I went with the second option. In case this helps someone else, here's how I resolved it for my case:

<template>
  <q-select
    v-model="state.location"
    :use-input="!state.location"
    input-debounce="500"
    label="Location (optional)"
    :options="options"
    dense
    clear-icon="bi-x"
    dropdown-icon="bi-chevron-down"
    clearable
    outlined
    @filter="fetchOptions">
    <template #prepend>
      <q-icon name="bi-geo-alt" />
    </template>
    <template #no-option>
      <q-item>
        <q-item-section class="text-grey">
          No results
        </q-item-section>
      </q-item>
    </template>
  </q-select>
</template>

<script lang='ts' setup>
  import { reactive, ref } from 'vue';
  import { QSelect } from 'quasar';
  import { fetchGeocodeResults } from '@/services';

  interface Result {
    position: {
      lat: number;
      lng: number;
    }
    title: string;
  }

  const state = reactive({
    ...other unrelated state,
    location: undefined as string | undefined,
  });

  const options = ref([]);

  const fetchOptions = async (val: string, update) => {
    if (val === '') {
      update();
      return;
    }

    const needle = val.toLowerCase();
    const results = await fetchGeocodeResults(needle);

    options.value = results.items.map((item: Result) => ({
      label: item.title,
      value: JSON.stringify(item.position),
    }));

    update();
  };
</script>

[MrugankDeshingkar]

this is helpful. but the reason that quasar dropdown menu does not open on focus is the inherent working of the select component. The html select component's dropdown does not get open on focus but you have to press enter or arrow key to explicitly open the dropdown. same methodology has been applied the q-select. using filter method override this functionality!