react-component / react-component/picker

Android IME keyboards not working with DatePicker/RangePicker due to keydown handling

Open
#929 0 comments 0 reactions 0 assignees View on GitHub

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

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.