Vuetify: Once selected a value on autocomplete, you can't erase to type/search again

Created on 15 Jul 2017  Â·  9Comments  Â·  Source: vuetifyjs/vuetify

Steps to reproduce

https://codepen.io/anon/pen/LLaBMd?editors=1010

  1. type 'aabb' in the autocomplete
  2. select a value 'aabbbb' or 'aabbcc'
  3. once selected, focus the component again, and you can see the cursor blinking, you can type more characters, but you can't change the text of the value, I mean, you can't backspace/delete and search another value

https://vuetifyjs.com/components/selects
in the autocomplete example
search with 'ala' and select 'Alaska', then, try to backspace the end, 'ska', to filter and select 'Alabama'.

Versions

0.13

What is expected ?

On autocomplete, you should be able to erase the selected value and type to search for another.

What is actually happening ?

You can only add more characters in the current select text, you can't erase.

Reproduction Link

https://codepen.io/anon/pen/LLaBMd?editors=1010
you can reproduce it in docs in the autocomplete section
https://vuetifyjs.com/components/selects

bug

Most helpful comment

You can continue to filter, indeed, but it seems strange

image
I initially select California, but then I want to change and filter states with 'ala', then the input text gets 'California ala'. I think enabling the user to erase 'California' (then v-model would be null, or the filter text, maybe), and then type the next filter, would be better.

edit:
In angular material 2 autocomplete you can select any value, erase, filter again, select another, this behavior seems better. If I'm not mistaken, the model assume the value of the filtered text when typing, and assume the object select when the user selects a value in the list.

All 9 comments

I note that the select with the editable property of such a problem is not present

adding editable kind of works, but it changes the component design and item-text and item-value gets messy
my component is declared as follows

<v-select
          label="Categoria"
          :items="categorias"
          v-model="categoria"
          item-text="nome"
          item-value="id"
          autocomplete>
</v-select>

You can still filter your selection and select another. What this issue tells me is that's not the expected behavior. Going to try and improve that.

Updating this scenario hide the selections when using an autocomplete/editable non-multi select.

No, I believe that this is an incorrect fix error! It is necessary not to hide and make it editable!
screenshot_20170716_100636

What is the value of v-model, when you'd hide it?
@johnleider

It's the same? The search value is separate and internal.

On Jul 16, 2017 4:24 AM, "Denis Efremov" notifications@github.com wrote:

What is the value of v-model, when you'd hide it?
@johnleider https://github.com/johnleider

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/vuetifyjs/vuetify/issues/995#issuecomment-315593789,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AIpOgmmsCETlvHIyt8coPGhWIVr0Rte7ks5sOcjDgaJpZM4OY2vr
.

You can continue to filter, indeed, but it seems strange

image
I initially select California, but then I want to change and filter states with 'ala', then the input text gets 'California ala'. I think enabling the user to erase 'California' (then v-model would be null, or the filter text, maybe), and then type the next filter, would be better.

edit:
In angular material 2 autocomplete you can select any value, erase, filter again, select another, this behavior seems better. If I'm not mistaken, the model assume the value of the filtered text when typing, and assume the object select when the user selects a value in the list.

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs. Please direct any non-bug questions to our Discord

Was this page helpful?
0 / 5 - 0 ratings