Quasar: Allow QSelect to be used as standard input with possibility to select from list

[luckylooke]

Is your feature request related to a problem? Please describe.
When you want to have input where user can write custom value or select value from list, you do not have much possibilities. Most suitable seems to be QSelect component with following attributes:

        fill-input 
        hide-selected
        hide-dropdown-icon
        input-debounce="0"
        new-value-mode="add" 

but the only option to keep custom value in was to hit enter in the end of value (to save custom value), few days ago I asked for adding "TAB" button support as usually user go away from input by hitting TAB to get to another input. But recently I found out that some users use to click elsewhere (away from input). On such click the custom value is not saved and input clear itself. I thought it was a bug, but now I think that QSelect was not meant to support my case, therefore I am opening this as feature request.

Also when user returns to input and click into input it clears itself on that click.

I agree that when using chips it makes sense, or if the input is meant to be search input, to search over values in the list.

In my scenario I need to have option to change behaviour of QSelect input to act as standard input do.

Describe the solution you'd like
I would like to have option to turn the input into standard input behaviour, maybe by attribute:

<q-select
        as-input
        :options="options" 
        label="Street"
        v-model="address.street"
/> 

so input value is not cleared until user clears it. Not when click away, nor when click, or focus input later on.

Describe alternatives you've considered
I did not come with alternatives yet.

Additional context
in my scenario I am using this setup for address form where user types into street and google api responds with some predictions which are provided to user as options, but I want to keep possibility to add custom value, as google does not have all 100% addresses.

Thank you very much for dealing with this issue, it is very appreciated. 🙏

[1001v]

+1 for this. That is something similar to vuetify's combobox component.

[heitorlessa]

Yes, please! I'm currently migrating from 0.17 to 1.x and I just hit this - Trying to delete an option doesn't work as expected because it's not an input tag, clearable helps but not with a keyboard delete key

Update: Managed to get UX I needed with hide-selected fill-input props. Still interested in an input tag nonetheless

[luckylooke]

@heitorlessa please can you provide your solution, where did you get so far? Maybe it helps me and also others. You can use this codepen as starting point if you wish. Many thanks 🙏

[heitorlessa]

Hi @luckylooke - I've got as far as that codepen you shared - I added both hide-selected, fill-input, clearable props so I could have the desired UX working.

While it's not an input tag it gets pretty close to what I needed e.g. able to type, and remove chars by using backspace

Image

Snippet

    <div class="search__options q-pa-sm">
        <q-select
            data-test="search-departure"
            v-model="departureCity"
            stack-label
            label="Departure airport"
            hint="Minimum 3 characters for autocomplete"
            class="home-icons search__options--input search__departure text-bold"
            input-style="search__departure--suggestion"
            :min-characters="3"
            :options="suggestionList"
            option-label="name"
            option-value="code"
            map-options
            emit-value
            input-debounce="200"
            @filter="fuzzySearchFilter"
            display-value-sanitize
            use-input
            item-aligned
            hide-dropdown-icon
            clearable
            hide-hint
            hide-selected
            fill-input
        >
          <template v-slot:before>
            <q-icon name="flight_takeoff" color="primary" class="field-icon"/>
          </template>
        </q-select>
...

[luckylooke]

@heitorlessa thanks, for my purpose it is not enough.. my user should be able to add custom value OR pick one from list.. currently they can add only by hitting ENTER or TAB.. but I need to keep value also on click elsewhere and I do not want to input get cleared on click... so in simple words I want select to act as common input but with available optional options provided.

[natxocc]

I have the similar problem. Users have used to click to the next input after creating a new value, and it dissapears. It would be usefull to maintain the value (After press Enter, Tab o simply on exit focus).

[rstoenescu]

Enhancement will be available in "quasar" v1.9.9.

[robert-niestroj]

How to use this? An example in the docs of QSelect would be nice for this.

[pdanpdan]

https://quasar.dev/vue-components/select#Example--Text-autocomplete