react-component / react-component/picker
Android IME keyboards not working with DatePicker/RangePicker due to keydown handling
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 304
- Forks
- 345
- Avg merge
- 2d 7h
- Merged PRs (30d)
- 7
Description
Hi there,
I'm using Antd Date Picker and Range Picker, and I'm facing an issue: I can't use virtual keyboards (Input Method Editors or IMEs) on my Android device because the browser is not passing the actual pressed key to JavaScript. If you listen to the native HTML keydown event, the event.key is Unidentified.
This article describes a similar issue quite well: https://weiyen.net/articles/an-unusual-google-keyboard-bug/. However, I've been researching a bit more and it seems to be related to several virtual keyboards, including GBoard and Microsoft SwiftKey.
I found some issues in Chromium, but unfortunately, it looks like they don't plan to fix this, since it rely on how virtual keyboards work for getting that info:
A possible workaround seems to be handling validation and formatting by listening to the input event instead of keydown. So the problem might be in the function onFormatKeyDown, which could still handle special keys like Enter, Escape, etc., and move validation and committing changes to a new input handler.
What do you think about it?
Best regards,
Jose
Contributor guide
No contributing guide indexed for this repository
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start in src/PickerInput/Selector/Input.tsx at onFormatKeyDown and compare its keydown handling with the proposed input-event path. Reproduce the DatePicker or RangePicker behavior on Android with GBoard or SwiftKey; done means virtual-keyboard input is accepted while special keys such as Enter and Escape still work.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 38/100