search

darrenjennings / vue-autosuggest

🔍 Vue autosuggest component.
https://darrenjennings.github.io/vue-autosuggest
MIT License
621 stars 91 forks source link

Mobile Issue | spinner does not showing #106

Closed ahsansalaldaha closed 5 years ago

ahsansalaldaha commented 5 years ago

What you did: Implemented auto suggest in my project. working flawlessly except mobile.

What happened:

Spinner not showing after typing

Problem description: Does not show the spinning after a user typed something unless he taps out of the field.

Suggested solution: not sure

darrenjennings commented 5 years ago

@ahsansalaldaha there is no "spinner" bundled with vue-autosuggest so not sure what you mean. Can you please create a codesandbox to reproduce your issue?

You can fork this one: https://codesandbox.io/s/627qlx66oz

rangermeier commented 5 years ago

Not sure about the spinner (I guess some custom UI), but I can confirm that on-input-change does not fire on Chrome Android 73 while the input has focus. Only when the input loses focus on-input-change triggers. It works on Firefox Android though.

E.g. I use on-input-change to fetch search results from the backend while the user types. On Chrome Android the suggestions will only update after I click elsewhere on the page (then the event fires) and then focus the input again (the suggestions are shown).

You can test it with the official demo

rangermeier commented 5 years ago

Some more insights: This is caused by https://github.com/vuejs/vue/issues/9777#issuecomment-478831263

On some mobile phones the keyboard is in composing mode while typing a word, which prevents v-model to fire.

If we want to get notified after each keystroke we'd have to use <input v-on:input="e => searchInput e.target.value" :value="searhcInput" />.

Not 100% sure as I don't have any experience with languages that use composition but I assume eager updating would be generally the desired behavior for an autosuggest widget.

ahsansalaldaha commented 5 years ago

Thank you so much Rupert for the kind information.

On Wed, 24 Apr 2019, 3:58 pm Rupert Angermeier, notifications@github.com wrote:

Some more insights: This is caused by vuejs/vue#9777 (comment) https://github.com/vuejs/vue/issues/9777#issuecomment-478831263

On mobile phones the keyboard is in composing mode while typing a word, which prevents v-model to fire.

If we want to get notified after each keystroke we'd have to use <input v-on:input="e => searchInput e.target.value" :value="searhcInput" />.

Not 100% sure as I don't have any experience with languages that use composition but I assume eager updating would be generally the desired behavior for an autosuggest widget.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/darrenjennings/vue-autosuggest/issues/106#issuecomment-486175084, or mute the thread https://github.com/notifications/unsubscribe-auth/ACBRNME3KLHDGA6KRZF56N3PSA4L3ANCNFSM4HHW43AA .

darrenjennings commented 5 years ago

This seems like a duplicate of https://github.com/darrenjennings/vue-autosuggest/issues/70. Please try beta version (which is very stable, just working on some more things before I release as 2.0 officially):

npm install vue-autosuggest@2.0.0-beta.7

this version removes internal v-model in favor of @input and :value as @rangermeier points out. Hopefully this helps: https://codesandbox.io/s/2vr87nyvkp