Fix #6086: Chips input component doesn't function properly on mobile devices

[YZarytskyi]

Fix #6086, #3885

In this pull request, several modifications were made to address issues with the Chips input component on mobile devices. Here's a breakdown of the changes and their rationale:

- Switch Statement Changed to Use event.key:
The switch statement previously used event.code, which is not available on mobile devices. To ensure compatibility across all devices, the switch statement was updated to use event.key.

- Removal of Code Handling Strange Code 229 for Comma:
A portion of code was removed that handled a specific issue (// GitHub #3885) related to Android Opera browsers generating a strange code 229 for commas. This handling was no longer necessary and was causing unexpected behavior on mobile devices where event.which consistently returned 229 for almost every symbol.

- Addition of onChange Handler:
An onChange handler was added to the input element to access the updated value. This allows for checking if the value ends with props.separator, and if so, removes the separator and calls the addItem function accordingly. This ensures proper handling of input changes, especially on mobile devices.

- Addition of enterKeyHint: "enter" Attribute:
The enterKeyHint: "enter" attribute was added to the input element. This attribute ensures that the enter key doesn't simply change the focus to the next element on mobile devices, where onKeyDown events may not trigger as expected. Instead, it helps maintain focus on the current input and ensures proper functionality of onKeyDown events.

- Flexibility in Separator Handling:
With these changes, the separator can now be almost any symbol, providing greater flexibility and compatibility with various input scenarios.

- Enhanced Backspace Functionality:
With the changes, the backspace key now works as expected for deleting elements on mobile devices, improving overall user experience.

- Testing and Validation:
The changes were thoroughly tested using BrowserStack on Android devices and iOS across different browsers to ensure functionality and compatibility. The modifications were found to resolve the issues and improve the behavior of the Chips input component on mobile devices.

These changes address the reported issues and enhance the usability of the Chips input component, ensuring consistent behavior across different devices and browsers.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

2 Ignored Deployments

Name	Status	Preview	Comments	Updated (UTC)
primereact	⬜️ Ignored (Inspect)	Visit Preview		Mar 5, 2024 3:21pm
primereact-v9	⬜️ Ignored (Inspect)	Visit Preview		Mar 5, 2024 3:21pm

[YZarytskyi]

@melloware, I believe the documentation regarding Chips separator should be updated because developers can now use more symbols than just a comma as a separator.

[melloware]

@YZarytskyi just update the comments in chips.d.ts and the docs are autogenerated from the TypeScript def.

[nitrogenous]

perfect 🔥