Vuetify: [Feature Request] Autocomplete: Selecting an item in multiselect should be able to reset the text input

[aleissner]

Problem to solve

In https://github.com/vuetifyjs/vuetify/pull/6342 the behaviour of the autocomplete field for multiselect was changed to not reset the text-input after a selection.

The user should be able to select several unconnected items from a list. Keeping a partial input after a selection is an hindrance since the user has to delete it before being able to resume typing the next item.
Additionally the visual state of the component is not clear if a partial input remains after a selection.

Proposed solution

Add a prop to the autocomplete component that allows to define the behaviour according to the use case in which it is applied.

[timdorey]

I have just stumbled across the same issue which was not present prior to the mentioned commit. I agree with @aleissner that this should be controlled through a prop.

Each time an option is selected from the refined list the search text remains. This process requires the search text to be deleted if the user wants to select another option which is not in the current filtered list of options.

[anthonycheng12]

Does anyone have a hacky solution to this or do we just have to wait for a prop to be made?

[omggga]

Same problem.
Workaround is only to reset input text on @change event, but it creates buggy events for me.

Or just to downgrade to 1.4.4 before #6342 issue resolved.

[sethjfischer]

Same problem, I want to easily select multiple items _that don't start with the same letter(s)_...

For example: I type "Bob"

• The control shows all names starting with "Bob" ---> OK
• User selects "Bob Johnson" ---> Here the filter is NOT reset
• User wants to select "John Doe"... "John Doe" is not in the list because previous search filter remains after the selection. User now has to notice this and backspace to remove filter to get full list.

The reason for the change (requested in #5926 and later implemented in #6342) "sort of" make sense, but I don't think this is the way most people use the autocomplete. They use it as a search to find someone/thing in large list. This new behaviour is frustrating to users because what are the odds that you are adding people/things that all start with the same letter(s)? For example, if I'm adding users to a group, the odds that all those user's names will start with the same letter is highly unlikely. This change seems to decrease usability in most use cases. I agree that it would be nice if there was a prop that turns on/off resetting of the filter on selection so that there is room for both use cases. :)

[KaelWD]

Very easy to work around:

:search-input.sync="search"
@change="search = ''"

[rajagopalx]

Is there any global workaround? We used multi select Autocomplete in more than 50 places in our project.

[johnfraney]

One global solution is to write a thin wrapper component that incorporates the above workaround:

<template>
    <v-autocomplete
        v-bind="$attrs"
        v-model="$attrs.value"
        :search-input.sync="search"
        @change="search = ''"
    />
</template>

<script>
export default {
    name: 'Autocomplete',

    data() {
        return {
            search: '',
        };
    },
};
</script>