toolshed: cannot clear searchbar

[mirelaminkova]

when searching for a owner under Explore -> Owners and you type an owners name, you cannot clear that input with backspace. Users need to reload their page to get a clear search bar.

[jmchilton]

You don't need to do a full refresh you can just select someone new. It is a confusing UI for sure - it looks like a textbox but it is a select widget with search - I don't think I wrote this widget but I maybe I can tweak its parameters to improve this UI.

[jmchilton]

Issue Analysis: Cannot Clear Searchbar (#21413)

Current Implementation (SelectUser.vue):

<q-select
    :dense="dense"
    filled
    use-input
    :hide-selected="hideSelected"
    :label="label"
    v-model="selected"
    input-debounce="0"
    @filter="filterFn"
    :options="options"
/>

Problem: q-select with use-input looks like a text input but is a select widget. Users expect backspace to clear it like a normal input, but it doesn't work that way.

---

Solutions to Try (ranked by probability of success)

1. Add clearable prop (90% likely to work)

<q-select
    clearable
    ...
/>

Adds an X button to clear selection. Simple, built-in Quasar feature. Downside: requires mouse click, doesn't fix backspace expectation.

2. Add keyboard handler for backspace/delete (80% likely to work)

<q-select
    clearable
    @keyup.delete="selected = null"
    @keyup.backspace="handleBackspace"
    ...
/>

Where handleBackspace checks if input is empty and clears selection. This addresses the backspace UX issue directly.

3. Combine clearable + fill-input (70% likely to work)

<q-select
    clearable
    fill-input
    use-input
    hide-selected
    ...
/>

fill-input makes selected value appear in the input field (more text-input-like). Combined with clearable, might feel more natural.

4. Switch to q-input with autocomplete dropdown (60% likely to work)

More invasive change - use a regular q-input with a custom dropdown/popup for suggestions. Would behave exactly like a text input but requires more code.

5. Use @input-value event to detect empty input (50% likely to work)

<q-select
    @input-value="onInputChange"
    ...
/>

Track input value changes and clear selection when user clears the text. Known issue: Quasar clears input on blur, which complicates this approach.

---

Recommendation

Start with #1 + #2 combined: add clearable prop plus a backspace handler. This gives users both the X button and keyboard clearing.

Sources:

• Quasar Select Documentation
• QSelect use-input UX issues #5768
• Select Input - clear selection #5468
• Select: Clearable CodePen

[mvdbeek]

That works now