Autocomplete intermittent on Chrome Android

Hmm. It seems Android's keyboard working in IME mode and `compositionend` event is not fired.

Assigned 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 :(

Try 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.

@oliverpolden it's a new age :)

@see: https://www.drupal.org/node/2815083

Ahh. 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)

Tested on 8.5.3. Works perfect!
Thx for the bugfix!

+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.

#5 is working great with 8.6.1!

#5 RTBC IMHO. Tested in 8.6.3.

@droplet thx for the patch!

User 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?

+++ b/core/misc/autocomplete.es6.js
@@ -224,13 +228,24 @@
+        if (!isAndroid) {
+          $autocomplete.on('compositionstart.autocomplete', () => {
+            autocomplete.options.isComposing = true;
+          });
+          $autocomplete.on('compositionend.autocomplete', () => {
+            autocomplete.options.isComposing = false;
+          });
+        }

Looking at https://github.com/vuejs/vue/blob/52719ccab8fccffbdf497b96d3731dc86f04c1... do we even need the if here? Is the browser detection necessary?

The latest Vue removed the if
https://github.com/vuejs/vue/issues/7367

@all the patch working for drupal version 8.6.15

This 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.

Tested on Chrome Android 6.0.1 and 7.1.1.
Its appearing fine and resolved

Working on reroll

Patch Applied successfully on 8.9.x but not on 9.1.x
Updated a rerolled patch for 9.1.x, Kindly review.

#27 is a random failure, re-queued.

https://www.drupal.org/pift-ci-job/1756977 is not a random fail - it fails like this locally.

I believe core/misc/autocomplete.js wasn't transpiled properly.

This patch passes the failed tests locally.

Added patch #31, and its working fine

Here is a working patch tested on 8.9.6

This 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.

This 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?

+++ b/core/misc/autocomplete.es6.js
@@ -231,13 +235,24 @@
+        // Use CompositionEvent to handle IME inputs. It requests remote server
+        // on "compositionend" event only.
+        // Safari < 10.2 & UIWebView doesn't fire compositionend when
+        // switching focus before confirming composition choice
+        // this also fixes the issue where some browsers e.g. iOS Chrome
+        // fires "change" instead of "input" on autocomplete.
+        // @see: https://github.com/vuejs/vue/blob/v2.4.4/src/platforms/web/runtime/directives/model.js
+        $autocomplete.on('change.autocomplete', () => {
           autocomplete.options.isComposing = false;
         });
+        if (!isAndroid) {
+          $autocomplete.on('compositionstart.autocomplete', () => {
+            autocomplete.options.isComposing = true;
+          });
+          $autocomplete.on('compositionend.autocomplete', () => {
+            autocomplete.options.isComposing = false;
+          });

Looking at the current code in Vue we can ditch the user agent sniffing and do

+        // Use CompositionEvent to handle IME inputs. It requests remote server
+        // on "compositionend" event only.
+        // Safari < 10.2 & UIWebView doesn't fire compositionend when
+        // switching focus before confirming composition choice
+        // this also fixes the issue where some browsers e.g. iOS Chrome
+        // fires "change" instead of "input" on autocomplete.
+        // @see: https://github.com/vuejs/vue/blob/dev/src/platforms/web/runtime/directives/model.js#L37
+        $autocomplete.on('change.autocomplete', () => {
+          autocomplete.options.isComposing = false;
+        });
+        $autocomplete.on('compositionstart.autocomplete', () => {
+          autocomplete.options.isComposing = true;
+        });
+        $autocomplete.on('compositionend.autocomplete', () => {
+          autocomplete.options.isComposing = false;
+        });

See https://github.com/vuejs/vue/blob/dev/src/platforms/web/runtime/directiv...

Is 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?

#38

this issue is about IME. So if you using English typing, 99% you will not run into this problem.

When will this be commited?

no reviwers, so never end.

@droplet there is still work needed, so it won't be committed until it's 100% done and tested.

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

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

Happy to help with the review, comment #37 needs to be addressed

Thanks @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!

I 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.

Rerolled patch at #33 in MR https://git.drupalcode.org/project/drupal/-/merge_requests/712

The 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?

Re-rolled patch for 9.1.

Tested 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.

I'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.

Tagging for Global Contribution Weekend.

I applied the patch to a Drupal 9.3.6
Works fine and the autocomplete works as it should, as seen in mherchel´s video.

The patch works on Drupal 9.5.x. Please review.

Please 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.

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.

@kristen pol, @alexpott Although the vuejs code is different and doesn't have browser validation,

these code:

        if (!isAndroid) {
          $autocomplete.on('compositionstart.autocomplete', function () {
            autocomplete.options.isComposing = true;
          });
          $autocomplete.on('compositionend.autocomplete', function () {
            autocomplete.options.isComposing = false;
          });
        }

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.

The MR is merging into Drupal 9.3, this needs to be changed to 9.5.

We 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

Summary:
- 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():

        $autocomplete.on('compositionstart.autocomplete', function () {
          autocomplete.options.isComposing = true;
        });
        $autocomplete.on('compositionend.autocomplete', function () {
          autocomplete.options.isComposing = false;
        });

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'.

        $autocomplete.on('change.autocomplete', () => {
           autocomplete.options.isComposing = false;
         });
        if (!isAndroid) {
          $autocomplete.on('compositionstart.autocomplete', () => {
            autocomplete.options.isComposing = true;
          });
          $autocomplete.on('compositionend.autocomplete', () => {
            autocomplete.options.isComposing = false;
          });
        }

Then the suggestion in #37 removes the if statement, taking us back to the original, though with the extra 'change' event handler:

        $autocomplete.on('change.autocomplete', () => {
          autocomplete.options.isComposing = false;
        });
        $autocomplete.on('compositionstart.autocomplete', () => {
          autocomplete.options.isComposing = true;
        });
        $autocomplete.on('compositionend.autocomplete', () => {
          autocomplete.options.isComposing = false;
        });

+++

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?

        $autocomplete.on('compositionstart.autocomplete', function () {
          autocomplete.options.isComposing = true;
        });
        $autocomplete.on('compositionend.autocomplete', function () {
          autocomplete.options.isComposing = false;
        });

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?

The source branch in https://git.drupalcode.org/project/drupal/-/merge_requests/712 should still be changed to 10.1.x.

The 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 via cweagans/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.

Thank you, applied #74 to 9.5 successfully

I have verified the patch #74 on drupal-10.1.x version. Patch failed.
Getting below errors:

Checking patch core/misc/autocomplete.es6.js...
error: core/misc/autocomplete.es6.js: No such file or directory
Checking patch core/misc/autocomplete.js...
error: while searching for:
**/
(function ($, Drupal) {
  var autocomplete;
  function autocompleteSplitValues(value) {
    var result = [];
    var quote = false;

error: patch failed: core/misc/autocomplete.js:6
error: core/misc/autocomplete.js: patch does not apply

Patch for 10.1.x.
Please review.

Patch from #74 doesn' t apply to 9.4.10. So, I rerolled it.

Fixed CCF for #80.

Hi everyone! I have rerolled the patch for 9.5.x as well. Hope everything is in order. Thank you very much!

Looks like good catch of the function with javascript.

#82 and #83 looks like a patch to be reviewed for the current issue.

The 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.

Patch #79 works!

Issue tags: -, -JavaScript +JavaScript - I didn't mean to. It is accidentally.

Re-rolled #83 for 11.x-dev

As a bug will need a test case showing the bug.

Another re-roll for the soup. 10.1.1

Patch #92 works well in 10.4.6. Autocomplete would not work consistently with various versions of Android Google Chrome and sometimes Samsung's browser. But this patch resolves the issues I was seeing.