Backspace not fired when cursor after item in Chrome for Android

[waddlesplash]

(@joallard edit: 0. Use Google stock keyboard)

1. Go to http://brianreavis.github.io/selectize.js/ in Chrome for Android.
2. Attempt to backspace in the first example -- it won't work. Firefox for Android works as expected with backspace.

This happens for me on:
Android 4.3, Nexus 7 (build JWR66Y), Chrome 29 [latest stable].

If you need any more info, please let me know.

[brianreavis]

Thanks for the report! It works on Mobile Chrome for iOS. I'm downloading an Android Emulator... I'll try to reproduce it and get it fixed.

[waddlesplash]

Android-x86 won't work -- Chrome only runs on Android for ARM, so you'll have to use QEMU.

[brianreavis]

Reproduced it. After some research, it seems to be an issue with Android itself at the OS level and it affects a number of other libraries. Backspace events are simply not fired when an input is empty. Take a look at:

• Fixes #65. Fixing android browser bug for backspace event.  mathquill/mathquill#78 (comment)
• Android native app using WebView, backspace doesn't work properly codemirror/codemirror5#1196

Fixing this is going to be an ugly hack.

[kpwebb]

What about making the remove plugin work for single select lists too? That way at least there's a way to clear the items even when backspace isn't working.

[mrjoelkemp]

FWIW, the version of Codemirror in this project works fine (backspace working) on Android (I'm running a nexus 4): https://code.google.com/p/codemirror-android/source/browse/assets/codemirror2/lib/codemirror.js

[loop0]

I'm having the same issue here, using selectize 0.9.0 on my Nexus 4 Android 4.4.2

[andreapavoni]

Hi all, I've found a quick and dirty solution for this issue, it seems to work decently as a workaround:

onDropdownOpen: function() {
      var userAgent = navigator.userAgent.toLowerCase();
      var isAndroid = userAgent.indexOf("android") > -1;
      if (isAndroid) {
        this.clear(); // 'this' refers to selectize object
      }
}

[gczh]

@apeacox thanks for the quick and dirty fix! works just fine though anyone attempting this, be warned that the behaviour will differ slightly for iOS and android when trying to backspace -- tapping on the select will clear the selection on android.

[andreapavoni]

@gczh yeah, my fault not specifying it: more than a solution, it's a workaround to gracefully degrade on android devices.

[gustavohenke]

To those looking into this issue, Chrome Mobile will be fixed in the next release (which may occur in october 2014).

[leesalminen]

This seems to be fixed now to me. Close?

[bratanon]

Im still having this issue.

[rasmuscnielsen]

Just updated to 6.01 on Sony Xperia, and I'm also still experiencing the issue.

[joallard]

I see the need, but that's not an easy one. Anyone has a reasonable solution?

[rasmuscnielsen]

@joallard I made this workaround on the angular-selectize directive: machineboy2045/angular-selectize#139

It allows for an easy way to add a special 'clear option' in the dropdown itself. When selected, it will clear the input.
For the directive, the name of the option is added as an attribute, so for instance it can be
<input type='text' selectize options='[]' clear-option='Any'>

I guess a possibility like this in the selectize library itself would not only solve the problem, but be a nice feature?

[joallard]

Seeing chromium#118639 was closed as wontfix in Google's infinite wisdom...

@rasmuscnielsen I'm sorry, I'll have to disagree with the UX here. What I could see as viable workarounds however, is that one use the RemoveButton plugin, or have a X on the right side of the field.

[joallard]

I've fooled around on https://w3c.github.io/uievents/tools/key-event-viewer.html a bit to see what we could do for an ugly workaround.

Here's the event log of what happened:

# 1. Click field, type X

- keydown 229, value ''
- input, 'X'
- keyup 229, 'X'

# 2. Type 'Y'

- keydown 229, 'X'
- input, 'XY'
- keyup 229, 'XY'

# 3. Backspace Y

- input, 'X'
- keydown 229 'X'
- keyup 229 'X'

# 4. Backspace X

- input, ''
- keydown 229 ''
- keyup 229 ''

# 5. Backspace when empty (*)

- keydown 229 ''
- keyup 229 ''

Seems that the one backspace we want is the one that has no input event, and keyup and keydown.

We could work around that, say that if you're on Chrome Android, and the input value was empty, you down 229 and it is still empty, that's a backspace. We could also wait until they release compositionstart and work with that.

[doydoydoy]

I'm currently having this issue using Google Keyboard and Huawei Sywpe Keyboard.

[risadams]

closing stale issues older than one year.
If this issue was closed in error please message the maintainers.
All issues must include a proper title, description, and examples.

[joshuabach]

This issue is still occuring on Firefox for Android 106.1.0 (Android 10).

My workaround (insipred by @andreapavon) is

onType: function(text) {
    if (text.length <= 1) {
         this.clear();
    }
}

Which simply clears the control once the user starts typing. Works well enough for me.