Mobile Issue | spinner does not showing

[ahsansalaldaha]

• vue-autosuggest version: 1.8.3
• node version: v8.11.2
• npm (or yarn) version: 5.6.0

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]

@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]

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]

Some more insights: This is caused by vuejs/vue#9777 (comment)

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]

Thank you so much Rupert for the kind information.

…

On Wed, 24 Apr 2019, 3:58 pm Rupert Angermeier, ***@***.***> wrote: Some more insights: This is caused by vuejs/vue#9777 (comment) <vuejs/vue#9777 (comment)> 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 <#106 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/ACBRNME3KLHDGA6KRZF56N3PSA4L3ANCNFSM4HHW43AA> .

[darrenjennings]

This seems like a duplicate of #70. Please try beta version (which is very stable, just working on some more things before I release as 2.0 officially):

npm install [email protected]

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