Quasar: [v1] Filter function for QSelect is not getting applied on mobile

[danielfaust]

Describe the bug

When using QSelect on a mobile device (only checked on Android), then the filter does not get applied when I start to type in the QSelect textbox. Only after a whitespace has been added.

_It appears that anything only happens when a whitespace is involved in the modification (either one is added or one is deleted)_

Codepen/jsFiddle/Codesandbox (required)

See all filtering examples on https://quasar.dev/vue-components/select#Filtering-and-autocomplete

To Reproduce

On Android O (8.x) P (9.x) and Q (10.x on emulator):
Visit https://quasar.dev/vue-components/select#Filtering-and-autocomplete on an Android device, either with Google Chrome or with Firefox Preview (different rendering engine than Chrome / WebView) and go to the filter example section.

Type in "oo" to filter for Google and Facebook, but no filtering is being performed. Type in "oo " (trailing whitespace) and the filter gets applied, but correctly finds no matches for "oo ". Press backspace (delete backwards) to delete the whitespace, and the filter executes correctly by filtering out all but Google and Facebook.

On Android M (6.x) and Android L (5.x) pressing backspace does not apply the filter, don't know about Android N. This backspace issue could be caused by the autocorrect feature of the Android keyboard. Apparently whenever autocorrect kicks in, it won't trigger the filter (at least after pressing backspace).

Expected behavior

The filter should get invoked on any key press

Platform (please complete the following information):

OS: Android Q (emulator), Android P, Android O, Android M, Android L (all stock on Nexus and Pixel devices), confirmed on Samsung and Lenovo Tablets.
Browsers: Chrome, Firefox Preview (only tested on Android P)

[josejachuf]

The same thing happens to me with a pwa in android. On the iphone and on the desktop, it works fine.

[pdanpdan]

I can reproduce it. I'll take a look.

[josejachuf]

Hi @pdanpdan, simply using from the mobile (I use chrome) the following:
https://quasar.dev/vue-components/select#Using-menu-and-filtering

[pdanpdan]

Yes. I can reproduce it :). It's related to composition because Google keyboard starts composing a word and only ends on space or clicking on a word in the suggestions bar.

[danielfaust]

Sounds horrible. I've now been searching around and came across this thread https://github.com/ianstormtaylor/slate/issues/2062

One comment refers to:

• compositionStart
• compositionUpdate
• compositionEnd
• deleteContentBackward (maybe)

QSelect appears to be only handling compositionStart and compositionEnd
https://github.com/quasarframework/quasar/blob/a81a1180bb5ede64d6e6abc6d5ab215c7970f882/ui/src/components/select/QSelect.js#L808 so maybe there is an easy fix.

[rstoenescu]

Fix will be available in 1.0.4

[danielfaust]

Great, works fine! Thanks a lot for the effort.

[rstoenescu]

Thanks for confirming.