All cell changes are ignored on Android/Chrome

[atsepkov]

Describe the issue There is no way to enter a value into the cell/grid on Android device because the enter key gets ignored while inside the cell (reproduced on 3 Android devices w/ Chrome browser (including a tablet), on iPhone and PC the enter key works fine).

To Reproduce

• Use Android device to access the page (this bug occurred both in Chrome as well as other browsers - Mi Browser, Samsung Browser)
• Open any page with RevoGrid component on it (including https://revolist.github.io/revogrid/)
• Double-tap a cell to start editing it, the cell will become editable
• After you finish editing the cell, press the enter/return key on the Android keyboard, the key has no effect (I believe this is a bug)
• Tap outside the cell as alternative way of finalizing input, once cell loses focus the input resets to original value (this is probably not a bug since same thing happens on PC - just counter-intuitive compared to real Excel)

This initially led me to believe that perhaps Android keyboard's enter/go key actually sends a different keyCode than regular enter key (13), but opening a keycode tester on my Android device seemed to confirm that "go" key on the keyboard sstill sends the keyCode of 13 (like standard enter key).

In addition to the enter key not working, I would actually prefer the default behavior be the same as with Excel (losing focus = enter rather than cancel), if it's possible to implement or even achieve myself via events as it would partially mitigate the above bug - this behavior seems more intuitive, especially on mobile devices.

[atsepkov]

Glancing through RevoGrid codebase, I'm wondering if https://github.com/revolist/revogrid/blob/99b8e4af2aa2b53283801fcd3425ff2f636f50e7/src/components/overlay/editors/text.tsx#L27 is the culprit. Since the keyCode does match, maybe one of the other properties this conditional expects isn't being set on Android?

[ellis2323]

It doesn t work with android devices. I have tested with my pixel pro 6 and a samsung tab s7

[ellis2323]

I have debug with my devices. It seems code is "" and you don't use the keycode. If you change src/utils/keyCodes.utils.ts to check if e.key === 'Enter', it fixes the problem. Probably better to e.key.toLowerCase() === 'enter'.

https://snipboard.io/CPZrWD.jpg

[atsepkov]

Good catch, my suggestion would be to update the 2 locations (https://github.com/search?q=repo%3Arevolist%2Frevogrid%20isEnterKey&type=code) to use e.keyCode or e.key. IMO keyCodes should be consistent on all platforms, even international keyboards, whereas I'm not 100% sure the same holds for the string name.

[atsepkov]

@ellis2323 based on how old this issue is, I doubt it will be looked at unless one of us pushes a PR. Do you want to do it or should I?

[ellis2323]

I have holiday until monday. I can create a PR monday. And not sure what’s the best solution to check if it’s a enter. The author lib might have a preference.

[ellis2323]

As stated in the doc, keyCode is deprecated. We should use the key field to check if it is a enter. The code field with a virtual keyboard try to find the equivalent key but in our case it return ’’ Html doc

A tester: https://dvcs.w3.org/hg/d4e/raw-file/tip/key-event-test.html

[ellis2323]

There is an attribute html which could fix the pb. If we add enterkeyhint="enter", i think the key will be correct. After a try, it doesn't change the code value.

[ellis2323]

I have created a pull request: https://github.com/revolist/revogrid/pull/422