[QSelect] QSelect is hiding when options are empty and have a before-options slot

[Melchyore]

Hello!

I've created a custom filterable QSelect. For that, I'm using an QInput in the before-options slot. It doesn't use the native filter.

When I try to filter options, it works if the option(s) exist. But if the options don't match the filter value, the QSelect gets hidden... which is not the desired behavior because I can't even edit the filter value and the QSelect doesn't work anymore even if I click on it, the toggle icon changes but the list options is still hidden.

This is my code :

<template>
  <q-select
    ref="select"
    v-model="selected"
    outlined
    dense
    hide-bottom-space
    :rules="rules"
    :input-debounce="0"
    :label="label"
    :options="allOptions"
    :disable="disable"
    @update:modelValue="onInput"
    @popup-show="onPopupShow"
  >
    <template #before-options>
      <q-input
        ref="filterElement"
        v-model="filter"
        filled
        stack-label
        label="Filter"
        @update:modelValue="filterFn"
      />
    </template>
  </q-select>
</template>

<script lang="ts">
  import { defineComponent, ref, watch, PropType, nextTick } from 'vue'

  import { QSelect, QInput } from 'quasar'

  type Selected = {
    label: string,
    value: string | number
  }

  export default defineComponent({
    name: 'FilterableQSelect',
    props: {
      value: {
        type: [Number, String, Array, Object],
        default: (): Selected => null
      },
      options: {
        type: Array as PropType<Array<Selected>>,
        default: (): PropType<Array<Selected>> => []
      },
      multiple: {
        type: Boolean,
        default: false
      },
      label: {
        type: String,
        default: ''
      },
      rules: {
        type: Array,
        default: (): Array<() => void> => []
      },
      disable: {
        type: Boolean,
        default: false
      }
    },
    emits: ['update:modelValue'],
    setup (props, { emit }) {
      const select = ref<QSelect>()
      const filterElement = ref<QInput>()

      const originalOptions = ref<Array<Selected>>(props.options)
      const allOptions = ref<Array<Selected>>(props.options)
      const selected = ref<Selected>(props.value)
      const filter = ref<string>('')
      const isOptionSelected = true

      watch(() => props.options, (newValue: Array<Selected>, oldValue: Array<Selected>) => {
        emit('update:modelValue', null)

        selected.value = null
        allOptions.value = newValue
        originalOptions.value = newValue
      })

      const onInput = () => {
        emit('update:modelValue', selected)

        if (filter.value) {
          allOptions.value = originalOptions.value
          filter.value = null
        }
      }

      const filterFn = (value: string): void => {
        if (value === '') {
          allOptions.value = originalOptions.value
        } else {
          const needle = value.toLowerCase()
          allOptions.value = originalOptions.value.filter((v: Selected) => v.label.toLowerCase().indexOf(needle) > -1)
          select.value.refresh(0)
        }
      }

      async function onPopupShow (): Promise<void> {
        await nextTick(() => {
          if (!selected.value) {
            filterElement.value.focus()
          }
        })
      }

      return {
        allOptions,
        selected,
        filterFn,
        filter,
        onInput,
        isOptionSelected,
        onPopupShow,
        select,
        filterElement
      }
    }
  })
</script>

[ontwikkelfabriek]

@Melchyore If you want better support, please create a codepen that demo's you issue.(very easy to do)

You can extends this one:
https://codepen.io/rstoenescu/pen/xxEvBLR