InputController `backspace` will never fire on Android browsers, causes issues deleting attachments

[tedtate]

Hi all,

Description

So I noticed an interesting bug on Android, it isn't possible to delete attachments with the keyboard due to the fact that InputController never receives a keyCode for backspace.

It seems like on Android 'keydown' events will always output a keyCode of 229 instead of the value you would see on other platforms.

Steps to reproduce

Minimal repro case: https://output.jsbin.com/xaceco

1. Open the JSBin link in an android browser (I've tried both Firefox and Chrome)
2. Press the Add Attachment button
3. But your cursor in the trix editor and try to delete the attachment via backspace

Note: This works fine in desktop browsers or iOS

Related reading

Chromium Bug:

• https://code.google.com/p/chromium/issues/detail?id=118639

Related StackOverflow threads:

• http://stackoverflow.com/questions/8942678/keyboardevent-in-chrome-keycode-is-0
• http://stackoverflow.com/questions/10455626/keydown-simulation-in-chrome-fires-normally-but-not-the-correct-key/10520017#10520017

[tedtate]

@javan is this something you are considering addressing?

I tried this out on basecamp and was able to reproduce

[javan]

We've gone to great lengths to handle Android's composition events since it doesn't provide useful key codes, as you noted. I don't think we can use them to detect deleting an attachment though since composition events only provide string data.

You can delete attachments by tapping them and then tapping the remove button so I don't consider this high priority, but I'd definitely welcome a solution. Have any ideas?

[tedtate]

Do the composition events give you much additional information other than composition keycode (219 IIRC)?

[javan]

There are compositionstart,compositionupdate, and compositionend events, which provide event.data (the string being composed). More on composition events: https://developer.mozilla.org/en-US/docs/Web/API/CompositionEvent

Trix handles composition input here: https://github.com/basecamp/trix/blob/master/src/trix/controllers/input_controller.coffee#L234-L273

Related tests: https://github.com/basecamp/trix/blob/master/test/src/system/composition_input_test.coffee

[stale]

This issue has been automatically marked as stale after 90 days of inactivity. It will be closed if no further activity occurs.

[maxKimoby]

Has this issue been resolved? I got the same problem. On iOS, deleting attachments with backspace causes no problems (first backspace highlights the attachment, second one deletes it, as expected). On android, when trying to delete an attachment with backspace, it :

• Does not highlight the attachment, document.querySelector('[data-trix-mutable=true]') is undefined
• Makes the editor lose focus on second backspace

Is there any turn around for this to work please?