Autocomplete suggestions not working consistently on mobile devices

[skyash-dev]

p5.js version

No response

What is your operating system?

None

Web browser and version

No response

Actual Behavior

Personally most of the times suggestions do not appear,
OR
Suggestions appear inconsistently / unpredictably

Expected Behavior

If Autocomplete Hinter is on, Autocomplete suggestions should appear consistently as the user types (similar to desktop behavior)

Steps to reproduce

Autocomplete suggestions in the p5.js Web Editor are not working reliably on mobile devices.

Steps:

1. Open the p5.js Web Editor on a mobile device.
2. Turn on "Autocomplete Hinter" from preferences.
3. Start typing common p5.js functions (e.g., createCanvas, background).
4. Observe whether autocomplete suggestions appear.

Notes:

• Users have observed this issue (discussion in Discord)
• Could involve touch input, virtual keyboard, or missing triggers for autocomplete

im looking at this!

[ksen0]

Note for @raclim: this is a follow up to a Discord conversation with @skyash-dev and @aashu2006, they will coordinate adding their observations of the problem. I'm guessing it might overlap with CM6 on mobile question. Please do add any other notes (link issues etc) that would be helpful here!

[skyash-dev]

update:
while debugging i found e.key is not returning actual character values (often "unidentified") in mobile devices, so the condition /^[a-z]$/i.test(e.key) never passes and showHint is not triggered.

client/modules/IDE/components/Editor/index.jsx

this._cm.on('keydown', (_cm, e) => {
      // Skip hinting if the user is pasting (Ctrl/Cmd+V) or using modifier keys (Ctrl/Alt)
      if (
        ((e.ctrlKey || e.metaKey) && e.key === 'v') ||
        e.ctrlKey ||
        e.altKey
      ) {
        return;
      }
      const mode = this._cm.getOption('mode');
      if (/^[a-z]$/i.test(e.key) && (mode === 'css' || mode === 'javascript')) {
        this.showHint(_cm);
      }
    });

proposed fix:

this._cm.on('keydown', (_cm, e) => {
      // Skip modifier keys
      if (e.ctrlKey || e.altKey || e.metaKey) {
        return;
      }
      const mode = this._cm.getOption('mode');
      if (mode === 'css' || mode === 'javascript') {
        if (!isMobile() && !/^[a-z]$/i.test(e.key)) return;
        this.showHint(_cm);
      }
    });

note:
autocomplete suggestions on mobile cause the keyboard to close. this happens because focus is being moved away from the editor due to the current hint menu implementation. one of the possible approach is simplifying the interaction model on mobile. would love to know thoughts...

[aashu2006]

I tried switching the trigger from keydown to an input based event inputRead locally, and autocomplete started working consistently on mobile. It seems like relying on actual inserted text instead of key events avoids the Unidentified issue entirely.

- this._cm.on('keydown', (_cm, e) => {
-   if (((e.ctrlKey || e.metaKey) && e.key === 'v') || e.ctrlKey || e.altKey) {
-     return;
-   }
-   const mode = this._cm.getOption('mode');
-   if (/^[a-z]$/i.test(e.key) && (mode === 'css' || mode === 'javascript')) {
-     this.showHint(_cm);
-   }
- });

+ this._cm.on('inputRead', (_cm, changeObj) => {
+   if (changeObj.origin !== '+input') return;
+   const mode = this._cm.getOption('mode');
+   if (mode === 'css' || mode === 'javascript') {
+     const insertedText = changeObj.text.join('');
+     if (/^[a-z]$/i.test(insertedText)) {
+       this.showHint(_cm);
+     }
+   }
+ });

Not sure how this should map to CM6 yet, but this approach worked reliably in testing.

[skyash-dev]

@aashu2006 have you tested this on mobile? because it doesn't work for me!

[aashu2006]

Actually @skyash-dev, I tested this using the mobile viewport in DevTools, not on a real device. It seemed to work there, but that likely doesn’t capture actual mobile keyboard behavior. I will see if can verify on a physical device and report back. Thanks!

[skyash-dev]

@aashu2006 oh you can test it on mobile using your local ip address.

[aashu2006]

@skyash-dev Thanks!
I tested on my device via local IP, you are right the autocomplete still doesn’t trigger consistently. The inputRead approach worked in DevTools mobile view, but not on my device. So it’s likely more than just the keydown issue, possibly related to mobile input handling.

[aashu2006]

Actually I was testing only on my Android device and looked how the Codemirror is handling the input on the mobile. So, on mobile it uses a different input path (contenteditable) compared to desktop (textarea). Because of this, inputRead does not fire, so the current autocomplete logic never runs.

Even using change alone didn’t fully fix it because of IME behavior:

• While typing, the characters stay in composition state and aren’t processed immediately
• Updates mostly happen on compositionend (like space or dismissing the keyboard)
• Gboard also adds a trailing space (e.g "bac "), so token detection ends up reading whitespace instead of the actual word

To handle this, I tried combining:

• change → for desktop typing
• compositionend → when a word is committed on the mobile
• compositionupdate → to force updates during typing

Also I handled the trailing space before calling showHint so the correct token is picked up. With this, the autocomplete is now working consistently on my device while typing with the virtual keyboard.

[skyash-dev]

@aashu2006 im not sure about this but if this solution involves updating less loc than handling the regex test condition then maybe we should go with this.

but still the related problem is keeping the virtual keyboard opened during autocomplete suggestions.