Chips separator not working on mobile

[WMPerkele]

Describe the bug

When using the Chips component on mobile, the component does not recognize inputting the separator key.

Testing done on Opera for Android 12

PrimeReact version

8.1.1

React version

17.x

Language

ES6

Build / Runtime

Create React App (CRA)

[melloware]

@WMPerkele a few questions...

1. When you say separator is not working which key on Android are you pressing? I am just trying to get clear what key is NOT working.

2. Can you go to this site and press the key that is not working and then paste the screenshot output here please? https://w3c.github.io/uievents/tools/key-event-viewer.html

I want to see what Android and Opera is registering for that key.

[melloware]

OK it because it was using the old keyboard event.which === 188 instead of event.code === 'Comma'

[WMPerkele]

@WMPerkele a few questions...

1. When you say separator is not working which key on Android are you pressing? I am just trying to get clear what key is NOT working.
2. Can you go to this site and press the key that is not working and then paste the screenshot output here please? https://w3c.github.io/uievents/tools/key-event-viewer.html

I want to see what Android and Opera is registering for that key.

The separator key was the default which was comma (,). Pressing the same key on the site that you gave gives me keycode 229 so im not sure if that helps

[melloware]

OK but on key.code it should say "Comma" right? For example:

[WMPerkele]

It says "Undefined". Seems like this is an issue with onkeydown event and android devices

[melloware]

Yikes that is bad as that means it doesn't conform to proper browser spec. I would report this to the Opera team.

[melloware]

Actually what is the value of key is it , ?

[melloware]

It seems Android supports event.key but not event.code.

[WMPerkele]

Ive tested now on Opera, Chrome and Firefox for Android 12.

Opera and Chrome seem to both return keycode 229, the key is "Unindentified" and the data is ,

On firefox it returns keycode 188 correctly with key being , (comma). However if i try using the Chips component on your Primereact docs site (https://www.primefaces.org/primereact/chips) it still wont work or recognize the separator key

[melloware]

OK according to this event.key is available on all those browsers so it should be the value ,??

https://caniuse.com/?search=event.key

And event.code is not available except for Firefox on Android:

https://caniuse.com/?search=event.code

When I say key i mean this blue value

[WMPerkele]

Here's the full screenshot

[melloware]

Thanks this is a big help and will help me fix it. Do you mind sending me screenshots of BACKSPACE and ENTER key as well?

[WMPerkele]

[melloware]

Thanks this was a big help. I had to put in a special check for this 229 character as its not a comma on any other OS other than Android and these browsers. Very strange