angular/components

chips: SPACE separator does not work with virtual keyboards on Android

Open

#9237 opened on Jan 4, 2018

View on GitHub
 (12 comments) (10 reactions) (0 assignees)TypeScript (24,044 stars) (6,650 forks)batch import
P3androidarea: material/chipshelp wanted

Description

Bug, feature request, or proposal:

Bug

What is the expected behavior?

Separate chips on space when SPACE is set in MatChipInput.matChipInputSeparatorKeyCodes

What is the current behavior?

On Android devices it does not. (I personally tried Nesus X5 and pixel xl v1)

What are the steps to reproduce?

https://stackblitz.com/edit/chipinput "android friendly chip input" uses keyup and looks at the last char of the input's value, to get around Android's "bad" keyboard event w/o keys and indistinguishable keycode 229.

What is the use-case or motivation for changing an existing behavior?

To be able to use MatChipInput on Android.

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

All but on Android devices

Is there anything else we should know?

Android produces keycode 229 on space and other special characters. Related to https://stackoverflow.com/questions/36753548/keycode-on-android-is-always-229/42552368

Contributor guide

Tech stack
typescriptjavascripthtmlcss
Domain
frontend
Issue type
bug
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
3
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
1-3 hours
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
stale
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
clear
Prerequisites
Angular MaterialTypeScriptkeyboard events
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
50
Research direction
Focus on the MatChipInput directive in the chips module. The current implementation uses keydown event with keyCode. For Android (keyCode 229), switch to keyup event and compare the input value's last character to detect space. Check the StackBlitz example mentioned for reference. Ensure the fix does not break existing behavior on desktop.