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

mina-skunk commented 6 years ago

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

rajatkhare619 commented 6 years ago

I'm also looking for a solution to this. Is there any workaround for using mat chips on Android?

todd-skelton commented 6 years ago

Same issue here for me.

rajatkhare619 commented 6 years ago

For the time being, I modified the MatChipInput.prototype._emitChipEnd method on line 1739 in the file

\node_modules\@angular\material\esm5\chips.es5.js

to emit the chipEndevent by manually checking the value of the input field. This is just a temporary hack until we get a fix.

jerome8 commented 5 years ago

Issue still occures in v7.3.6 :(

josephperrott commented 5 years ago

From looking into this a bit, it looks like this is caused by the fact that Android browsers always return 229 as the keycode regardless of what key is pressed.

One options for us would be to get the charCode of the previous character that was added, we would need affordances to ensure that we don't recheck the previous character twice in a row.

josephperrott commented 5 years ago

As I have continued to investigate here is a bit more information on the state of things.

This only occurs with the virtual keyboard on Android devices, a hardwired USB keyboard produces the expected keyCodes.
The getCharCodeAt() method on String returns the ASCII charCode which is different than the keyCode that is provided in keyboard events.
The current recommendation (from mdn) for filtering events like this is actually to use key rather than keyCode, which returns the "result" of the keypress, i.e. shift + 1 produces event.key === '!' // true, while 1 produces event.key === '1' // true
Currently we do our checks in the keydown event which means that the value of the input does not yet include the key that was pressed, so we would have to also look for the value in keypress or in keyup
Based on this chromium bug it looks like this is something that is not likely to change, for many good reasons outlined in the bug.
The value comes in as 229 because the keyboard that is bringing in the value is handling the processing of the strings coming in. (Basically because autocorrect is allowed, it goes into a composition mode)

klyakh commented 3 years ago

Is there a workaround for this issue?

klyakh commented 2 years ago

Guys, I want to emphasize that this bug makes it virtually impossible to use MatChipInput on Android to enter tags. None of the typical separators work:

Comma and Space doesn't work
Enter is not available on virtual keyboard

So there is no way Android user can trigger new chip creation.

P. S. for those who struggle with the issue too: I'm going to switch from "tags are inside input" to "tags are outside of the type-able space" - https://ux.stackexchange.com/questions/95387/should-tags-be-inside-or-outside-the-input-field With this approach I can use regular text input + "Add tag" button.

BERRADA-Omar commented 2 years ago

I faced the same issue and found a workaround. Let say that "chipList" is the id of . The following input is used to insert values into the mat-list, for example emails : <input [(ngModel)]="emailsInput" (ngModelChange)="onEmailsInputChange()" placeholder="insert an email..." [matChipInputFor]="chipList"> Here we use the two way binding to trigger the onEmailsInputChange() function and reflect it to the mat-chip-list. Here's the function content : if (this.emailsInput.substr(-1) === ' ') this.add(); The add function will add the element to the mat-chip-list and so on. The idea here is to use text based event instead of keyCode.

A working example ==> https://stackblitz.com/edit/angular-ivy-kzkxyf?file=src%2Fapp%2Fapp.component.html

Ayushkubde commented 1 year ago

Hi, thanks for your help your link has helped me fix this issue which i was getting @BERRADA-Omar

adi-ezra commented 1 year ago

Also had to use a workaround like those suggested here such as checking every keydown whether a space was entered. How is this still an issue 5 years later?

angular / components