Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[v1] Filter function for QSelect is not getting applied on mobile #4578

Closed
danielfaust opened this issue Jul 8, 2019 · 8 comments · Fixed by #4591
Closed

[v1] Filter function for QSelect is not getting applied on mobile #4578

danielfaust opened this issue Jul 8, 2019 · 8 comments · Fixed by #4591

Comments

@danielfaust
Copy link

danielfaust commented Jul 8, 2019

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
Copy link

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

@pdanpdan
Copy link
Collaborator

pdanpdan commented Jul 8, 2019

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

@josejachuf
Copy link

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

@pdanpdan
Copy link
Collaborator

pdanpdan commented Jul 8, 2019

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
Copy link
Author

danielfaust commented Jul 8, 2019

Sounds horrible. I've now been searching around and came across this thread ianstormtaylor/slate#2062

One comment refers to:

  • compositionStart
  • compositionUpdate
  • compositionEnd
  • deleteContentBackward (maybe)

QSelect appears to be only handling compositionStart and compositionEnd

so maybe there is an easy fix.

@rstoenescu
Copy link
Member

Fix will be available in 1.0.4

@danielfaust
Copy link
Author

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

@rstoenescu
Copy link
Member

Thanks for confirming.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging a pull request may close this issue.

4 participants