Currently, I am facing a challenge while working on a Vue component with a q-select. My requirement is to have a consistent button embedded inside the q-select. However, the issue arises when the select option includes a filter that determines the availability of options. As a result, whenever I apply a filter and there are no matching results, the button vanishes along with the functionality it provides.
preview
<q-select
ref="selectEntityRef"
v-model="_value"
:options="filteredItems"
:label="_label || $t(entity?.defaultLabel) || ''"
:multiple="_multiple"
:debounce="_debounce"
:disable="_disable"
:readonly="_readonly"
:rules="_rules"
:dense="_dense || _ultraDense"
:lazy-rules="_lazyRules"
:hide-bottom-space="_hideBottomSpace"
:loading="isLoading"
:aria-placeholder="placeholder"
:emit-value="!_returnObject"
:clearable="_clearable"
option-label="label"
option-value="value"
input-debounce="750"
use-input
outlined
class="col col-grow small-icon text-ellipsis"
@filter="filterItems"
@focus="focused = true"
@blur="blur"
@input="emitObject"
>
<template v-slot:selected>
<span
class="text-neutral-primary-dark"
v-html="placeholder"
/>
</template>
<template v-slot:option="scope">
<q-item
:data-test-id="getOptionId(scope)"
v-bind="scope.itemProps"
v-on="scope.itemEvents"
>
<q-item-section>
<q-item-label v-html="scope.opt.label"/>
</q-item-section>
</q-item>
</template>
<template
v-slot:after-options
>
<q-btn
:label="'Something'"
color="primary"
icon="add"
type="a"
dense
unelevated
flat
no-caps
class="text-neutral-primary-dark q-ml-sm q-mb-sm q-mt-sm"
@click="doSomething"
>
<q-tooltip
:delay="300"
anchor="bottom middle"
self="top middle"
transition-show="fade"
transition-hide="fade"
>
"Some Text"
</q-tooltip>
</q-btn>
</template>
</q-select>
My main goal is to ensure the persistence of the button even in scenarios where no options are available. How can I achieve this?