Steps to reproduce:
Currently replicated on Android 6.0.1 and 7.1.1.
- Find an autocomplete field e.g. Authoring information > Authored by: /node/add/page
- Type in a partial, valid username
Expected behaviour:
A username should appear.
What is happening:
It appears no callback is triggered and therefore no usernames appear. However once a whole word is typed and space entered, the callback is triggered.
The correct behaviour is experienced on the jQuery UI autocomplete page at http://jqueryui.com/autocomplete/
Comment | File | Size | Author |
---|---|---|---|
#92 | 2909128-92.patch | 1.31 KB | almunnings |
| |||
#90 | interdiff_83-90.txt | 1.3 KB | Ratan Priya |
#90 | 2909128-90.patch | 1.3 KB | Ratan Priya |
#86 | 2909128-nr-bot.txt | 144 bytes | needs-review-queue-bot |
#84 | Screenshot 2023-01-27 121511.png | 16.27 KB | Manoj Raj.R |
Issue fork drupal-2909128
Show commands
Start within a Git clone of the project using the version control instructions.
Or, if you do not have SSH keys set up on git.drupalcode.org:
Comments
Comment #2
oliverpolden CreditAttribution: oliverpolden commentedComment #3
droplet CreditAttribution: droplet commentedHmm. It seems Android's keyboard working in IME mode and `compositionend` event is not fired.
Comment #4
droplet CreditAttribution: droplet commentedAssigned to me. I will work out a patch in next 1 hour when I back to my desktop :)
We should exclude Android in this case :(
Comment #5
droplet CreditAttribution: droplet commentedTry it. Simple reload in Android Chrome might not clear cache properly. I highly recommended removing cache on browser setting or Enable "Aggregate JavaScript files" and "Clear all caches" in Drupal ( admin/config/development/performance )
EDIT: It's cross-browsing issue, no bot test.
Comment #7
droplet CreditAttribution: droplet commentedComment #8
oliverpolden CreditAttribution: oliverpolden commentedThanks Kay,
I can confirm that is working for me. Thank you for such a quick fix!
The patch included changes to an es6 file that I don't believe exists in core.
Oliver
Comment #9
droplet CreditAttribution: droplet commented@oliverpolden it's a new age :)
@see: https://www.drupal.org/node/2815083
Comment #10
oliverpolden CreditAttribution: oliverpolden commentedAhh, thanks Kay, was unaware of that. I am however getting an "isAndroid is not defined" error.
Comment #11
droplet CreditAttribution: droplet commentedAhh. What's your browser version? Did you patch your D8.3 with ES6 version?
It seems impossible. The indexOf used almost everywhere in D8.
(Even said if you use ES6, the Const also well-supported in very very older Chrome, only could be a problem back to around Android browser 4.4)
Comment #12
oliverpolden CreditAttribution: oliverpolden commentedKinda my bad. I just checked the patch file and found that it didn't apply the addition of the variables at the top of the file so I've now applied them manually and all is good. The patch not applying cleanly could be to do with me using Pantheon.
Comment #14
FreMun CreditAttribution: FreMun commentedTested on 8.5.3. Works perfect!
Thx for the bugfix!
Comment #15
M_Z CreditAttribution: M_Z commented+1 for changing the issue status to RTBC
I had problems with an autocomplete textfield for fulltext search with search API. In Chrome for Android no autocomplete suggestions appeared.
I can confirm that the patch fixes the problem for Chrome on Android phones. So after applying the patch everything works as expected.
@droplet: Thank you for providing the patch.
Comment #17
gge CreditAttribution: gge commented#5 is working great with 8.6.1!
Comment #18
interdruper CreditAttribution: interdruper at Interdruper commented#5 RTBC IMHO. Tested in 8.6.3.
@droplet thx for the patch!
Comment #19
alexpottUser agent sniffing seems very old school. Also Vue seems to do more now... https://github.com/vuejs/vue/blob/05e8bcfe5d308f280f3640df96bd170fbcf1a9...
Is there not something more reliable to rely on?
Looking at https://github.com/vuejs/vue/blob/52719ccab8fccffbdf497b96d3731dc86f04c1... do we even need the
if
here? Is the browser detection necessary?Comment #20
droplet CreditAttribution: droplet commentedThe latest Vue removed the
if
https://github.com/vuejs/vue/issues/7367
Comment #21
gangwarsurya CreditAttribution: gangwarsurya commented@all the patch working for drupal version 8.6.15
Comment #22
drakythe CreditAttribution: drakythe at The Worx Company commentedThis is still an issue in 8.7.x, can we potentially get this on the roadmap to be committed for 8.8.x?
@alexpott I realize that user agent is old school, but even Vue.js seems to use it (https://github.com/vuejs/vue/blob/v2.6.10/src/core/util/env.js - lines 10 and 14). Regarding your question of whether the if statement is even required, I don't have an android device to test so I can't do that until next week when one of my team is getting one.
Regardless this is still quite an issue, especially as it affects Views autocomplete fields that might be exposed to site visitors. The patch from #21 still applies cleanly against 8.8.x-dev.
Comment #25
tanubansal CreditAttribution: tanubansal at Salsa Digital commentedTested on Chrome Android 6.0.1 and 7.1.1.
Its appearing fine and resolved
Comment #26
mayurjadhav CreditAttribution: mayurjadhav at Srijan | A Material+ Company commentedWorking on reroll
Comment #27
mayurjadhav CreditAttribution: mayurjadhav at Srijan | A Material+ Company commentedPatch Applied successfully on 8.9.x but not on 9.1.x
Updated a rerolled patch for 9.1.x, Kindly review.
Comment #29
mayurjadhav CreditAttribution: mayurjadhav at Srijan | A Material+ Company commented#27 is a random failure, re-queued.
Comment #30
alexpotthttps://www.drupal.org/pift-ci-job/1756977 is not a random fail - it fails like this locally.
Comment #31
raman.b CreditAttribution: raman.b at OpenSense Labs commentedI believe
core/misc/autocomplete.js
wasn't transpiled properly.This patch passes the failed tests locally.
Comment #32
tanubansal CreditAttribution: tanubansal at Salsa Digital commentedAdded patch #31, and its working fine
Comment #33
kevinn CreditAttribution: kevinn commentedHere is a working patch tested on 8.9.6
Comment #35
Ruchi Joshi CreditAttribution: Ruchi Joshi at Srijan | A Material+ Company for Drupal India Association commentedThis issue doesn't exist for drupal 9.1. Functionality is already working fine. Screenshot is attached without any patch applied.
Steps:
1. Visit /admin/people
2. Add few users eg. admin, abc
3. Create an article page and edit it
4. Click on "Authoring information > Authored by:"
5. Type "ab" on this autocomplete field.
6. All the users having "ab" in the title will be visible.
Comment #36
drupalfan2 CreditAttribution: drupalfan2 as a volunteer commentedThis is still a problem on Drupal 9.1.5.
Autocomplete does not work proper without any patch on Android Chrome browser.
#35 does NOT work without any patch.
When will this be commited?
Comment #37
alexpottLooking at the current code in Vue we can ditch the user agent sniffing and do
See https://github.com/vuejs/vue/blob/dev/src/platforms/web/runtime/directiv...
Comment #38
drupalfan2 CreditAttribution: drupalfan2 as a volunteer commentedIs it possible that this problem here is related with the Autocomplete Deluxe problem ?
There I try to find out why tags can NOT be removed on mobile device (Android Chrome browser).
Somebody here who can help with this problem there or how to debug it?
Comment #39
droplet CreditAttribution: droplet commented#38
this issue is about IME. So if you using English typing, 99% you will not run into this problem.
no reviwers, so never end.
Comment #40
BramDriesen@droplet there is still work needed, so it won't be committed until it's 100% done and tested.
Comment #41
drupalfan2 CreditAttribution: drupalfan2 as a volunteer commented@droplet: I am using German. Is this a problem in German?
@all: Is it possible that this problem here is related with the Autocomplete Deluxe problem ? Can you help there to solve the problem?
Comment #42
droplet CreditAttribution: droplet commented@BramDriesen
Yeah, I'm waiting for that person. Because I won't and I can't review my own work.
@drupalfan2
I believed nope.
If you want to test related or not, that's easy. Just change (hardcoded) all
autocomplete.options.isComposing = true;
code to FALSE. Even you could remove the above 2 events to test.Comment #43
nod_Happy to help with the review, comment #37 needs to be addressed
Comment #44
droplet CreditAttribution: droplet commentedThanks @nod_
Just tried it again after a few years. Both iOS 14 & Android 8 or 10 (Gboard) has no problems anymore :s
We could still patch it theoretically.
The Android System has a UX problem. It may be what most users reported above.
Using Gboard on inputs, it works like composing, only SPACE will trigger the input. Leave the INPUT, even with a CHANGE event won't help. This is not related to the IME patch. (I removed CompositionEvent to test)
And google.com works very differently!! Is it Google's own hack? (hack from JS? or native system?) A bit odd!
Comment #46
error84 CreditAttribution: error84 commentedI am still seeing the problem with Drupal 9.1.8 on Android 10, with latest Chrome browser (and even with Samsung Internet): only after pressing a space the autocomplete dropdown shows up. It works fine on ios.
I tried to apply patch #31 but it failed against Drupal core 9.1.8.
In case it matters: the language used is Dutch.
Comment #49
piggito CreditAttribution: piggito as a volunteer and at Skilld commentedRerolled patch at #33 in MR https://git.drupalcode.org/project/drupal/-/merge_requests/712
Comment #50
kim.pepperComment #51
John Pitcairn CreditAttribution: John Pitcairn commentedThe patch at #31 still applies successfully to Drupal 9.1.9 using composer-patches, and fixes the issue for me in Chrome on Android 6 and 7 (using English). @error84 how were you patching? Do you perhaps have other patches applied that it collides with?
Comment #52
mortim07 CreditAttribution: mortim07 at Department of Customer Service, NSW commentedRe-rolled patch for 9.1.
Comment #54
mherchelTested the fix in the MR on https://2909128-autocomplete-1u4slgq1x3s8znmgparjqzitmx3svjb4.tugboat.qa...
Verified this is fixed.
I did not look at the code, but the patch works on my Pixel 3. Video attached.
Comment #56
Kristen PolI've read through the issue summary and the most recent comments.
Thanks for the testing @mherchel but the latest patch/MR did not incorporate the feedback from #37 to not use the user agent logic. Back to needs work to rework the patch to get rid of user agent.
Comment #57
Kristen PolTagging for Global Contribution Weekend.
Comment #58
marcoka CreditAttribution: marcoka commentedI applied the patch to a Drupal 9.3.6
Works fine and the autocomplete works as it should, as seen in mherchel´s video.
Comment #60
vacho CreditAttribution: vacho at Skilld commentedThe patch works on Drupal 9.5.x. Please review.
Comment #61
vacho CreditAttribution: vacho at Skilld commentedComment #62
Kristen PolPlease see comment #56. Either that work needs to be done or there needs to be an explanation why it doesn't need to be done.
Comment #63
vacho CreditAttribution: vacho at Skilld commented@kristen pol, @alexpott Although the vuejs code is different and doesn't have browser validation,
these code:
Works! on android-mobile and desktop-laptop.
Without android validation, there is a browser error and autocomplete doesn't work.
Accordingly to the documentation https://docs.w3cub.com/dom_events/compositionstart,
compositionstart
isn't compatible with several browsers overall on mobile.I tested and works on android with chrome and firefox with the validation
(if !isAndroid)
and without these doesn't work.Comment #64
vacho CreditAttribution: vacho at Skilld commentedComment #65
Gauravvvv CreditAttribution: Gauravvvv at Srijan | A Material+ Company for Drupal India Association commentedComment #66
quietone CreditAttribution: quietone at PreviousNext commentedThe MR is merging into Drupal 9.3, this needs to be changed to 9.5.
Comment #67
larowlanWe still need #37 addressed. If the proposed idea there doesn't work, then can someone provide a screenshot/recording of the issue it causes. Thanks
Comment #69
davidhk CreditAttribution: davidhk commentedSummary:
- The problem still exists. Autocomplete appears broken to people who use Chrome on Android
- #5 fixes the problem
- #37 backs out the changes from #5, so the problem happens again
- videos attached
Long-winded version:
I've run into this problem on our site. An autocomplete field to add an entity reference appears on most pages, and isn't working as expected on Android devices.
I've attached two videos showing the problem with the original code, and after the fix in #5. (After applying the change in #37, the behaviour is the same as the original, unpatched code.)
Autocomplete-9.4.7.mp4 : The behaviour with the current Drupal. As I type characters into the autocomplete field, the list of matches isn't shown. Only after I press the space key at 0:15 does the list get displayed, but most users won't realise they have to do that, so autocomplete appears to be broken.
Autocomplete-9.4.7+#5.mp4 : After applying patch #5, it behaves the same as expected - after each character is typed, the list of matches is updated.
The browser is Chrome on my Samsung phone, recorded via my PC. (I've got my Samsung phone connected to my PC via USB, then on the PC I'm using chrome://inspect/#devices to see the phone's browser.)
+++
The original code has these lines in function attach():
Patch #5 makes two changes.
- It wraps the above lines in an if, to disable them if we're running on Android.
- It adds a new handler for the 'change' event. I don't think that is related to this Android issue, but the comment says it helps fix a problem with 'Safari < 10.2 & UIWebView'.
Then the suggestion in #37 removes the if statement, taking us back to the original, though with the extra 'change' event handler:
+++
Why does #5 work?
Here's my understanding - corrections welcome:
The jQuery autocomplete updates the list of matches when it receives a 'keydown' or 'input' event.
When using a PC with a mechanical keyboard to type English, the 'keydown' makes jQuery update the list of matches after each keypress.
On a mobile phone there are other ways to enter text, known as IMEs, or Input Method Editors, and they will behave very differently from the English example above. eg a Chinese keyboard IME may take several keypresses to create one character. Or with a handwriting- / speech-recognition IME, there may be no keypresses, just a chunk of text delivered when the recognition finishes. The browser fires 'compositionstart' and 'compositionend' events to let us know if a user has started / finished using an IME.
The Android on-screen keyboard behaves like an IME and sends the 'compositionstart' and 'compositionend' events. Drupal's current code shown above uses those events to toggle 'autocomplete.options.isComposing'. Whenever that variable is true, Drupal tells jQuery not to update the list of matches - that's why the matches don't update on Android until the user presses space, and the 'compositionend' event is sent.
Even though Android says the keyboard is an IME, it also sends out a 'keydown' event after each letter is tapped. #5's 'if' statement means 'autocomplete.options.isComposing' remains false, and so jQuery can update the list of matches after each letter is tapped.
Does #5 break anything?
It turns off code that is triggered by IMEs, so does it cause any problems with other IMEs?
On Android I tried using the Pinyin qwerty IME. This takes several keystrokes to build one Chinese character. I also tried the handwriting recognition IME to enter a Chinese character, and an English word. Both worked fine with #5.
What next?
Hopefully patch #5 can go back to 'reviewed & tested'? It fixes the problem, and doesn't appear to introduce new problems.
As a possible follow-up issue, is it worth reviewing whether these two lines are needed at all?
I'm guessing they were added some time ago to work around a shortcoming in jQuery - browser interactions, maybe with Asian-language IMEs? As jQuery and browsers have been updated over the years (eg see #44), are they still needed?
Comment #73
DieterHolvoet CreditAttribution: DieterHolvoet at Minsky commentedThe source branch in https://git.drupalcode.org/project/drupal/-/merge_requests/712 should still be changed to 10.1.x.
Comment #74
m.stentaThe patch from #52 does not apply against 9.5.x. Attached is a re-roll of that patch for anyone who needs a hot-fix to include in
composer.json
viacweagans/composer-patches
.This does not change or address any of the above conversation, and should not be considered a "next step" - just a hot-fix for those who need it.
Comment #75
_utsavsharma CreditAttribution: _utsavsharma at OpenSense Labs for DrupalFit commentedComment #76
marcoka CreditAttribution: marcoka commentedThank you, applied #74 to 9.5 successfully
Comment #77
Bushra Shaikh CreditAttribution: Bushra Shaikh at QED42 for Drupal India Association commentedI have verified the patch #74 on drupal-10.1.x version. Patch failed.
Getting below errors:
Comment #78
Gauravvvv CreditAttribution: Gauravvvv at Axelerant for Drupal India Association commentedComment #79
_utsavsharma CreditAttribution: _utsavsharma at OpenSense Labs for DrupalFit commentedPatch for 10.1.x.
Please review.
Comment #80
balis_m CreditAttribution: balis_m commentedPatch from #74 doesn' t apply to 9.4.10. So, I rerolled it.
Comment #81
andypostComment #82
_utsavsharma CreditAttribution: _utsavsharma at OpenSense Labs for DrupalFit commentedFixed CCF for #80.
Comment #83
leolandotan CreditAttribution: leolandotan at Merkle commentedHi everyone! I have rerolled the patch for 9.5.x as well. Hope everything is in order. Thank you very much!
Comment #84
Manoj Raj.R CreditAttribution: Manoj Raj.R as a volunteer and at ITT Digital commentedLooks like good catch of the function with javascript.
Comment #85
Manoj Raj.R CreditAttribution: Manoj Raj.R as a volunteer and at ITT Digital commented#82 and #83 looks like a patch to be reviewed for the current issue.
Comment #86
needs-review-queue-bot CreditAttribution: needs-review-queue-bot as a volunteer commentedThe Needs Review Queue Bot tested this issue. It either no longer applies to Drupal core, or fails the Drupal core commit checks. Therefore, this issue status is now "Needs work".
Apart from a re-roll or rebase, this issue may need more work to address feedback in the issue or MR comments. To progress an issue, incorporate this feedback as part of the process of updating the issue. This helps other contributors to know what is outstanding.
Consult the Drupal Contributor Guide to find step-by-step guides for working with issues.
Comment #87
super_romeo CreditAttribution: super_romeo as a volunteer commentedPatch #79 works!
Comment #88
super_romeo CreditAttribution: super_romeo as a volunteer commentedIssue tags: -, -JavaScript +JavaScript
- I didn't mean to. It is accidentally.Comment #90
Ratan Priya CreditAttribution: Ratan Priya at OpenSense Labs for DrupalFit commentedRe-rolled #83 for 11.x-dev
Comment #91
smustgrave CreditAttribution: smustgrave at Mobomo commentedAs a bug will need a test case showing the bug.
Comment #92
almunningsAnother re-roll for the soup. 10.1.1