From 3b138ad599b3099faf8a13eceff68e675a7e2b41 Mon Sep 17 00:00:00 2001
From: YZarytskyi <yurazar222@gmail.com>
Date: Tue, 5 Mar 2024 16:51:14 +0200
Subject: [PATCH] Fix the Chips input component for mobile devices

---
 components/lib/chips/Chips.js | 26 +++++++++++++++++++-------
 1 file changed, 19 insertions(+), 7 deletions(-)

diff --git a/components/lib/chips/Chips.js b/components/lib/chips/Chips.js
index fd30a19533..5b200cd1b8 100644
--- a/components/lib/chips/Chips.js
+++ b/components/lib/chips/Chips.js
@@ -155,7 +155,7 @@ export const Chips = React.memo(
                 return;
             }
 
-            switch (event.code) {
+            switch (event.key) {
                 case 'Backspace':
                     if (inputValue.length === 0 && values.length > 0) {
                         removeItem(event, values.length - 1);
@@ -164,7 +164,6 @@ export const Chips = React.memo(
                     break;
 
                 case 'Enter':
-                case 'NumpadEnter':
                     if (inputValue && inputValue.trim().length && (!props.max || props.max > values.length)) {
                         addItem(event, inputValue, true);
                     }
@@ -189,11 +188,6 @@ export const Chips = React.memo(
 
                     if (isMaxedOut()) {
                         event.preventDefault();
-                    } else if (props.separator === ',') {
-                        // GitHub #3885 Android Opera gives strange code 229 for comma
-                        if (event.key === props.separator || (DomHandler.isAndroid() && event.which === 229)) {
-                            addItem(event, inputValue, true);
-                        }
                     }
 
                     break;
@@ -223,6 +217,22 @@ export const Chips = React.memo(
             preventDefault && event.preventDefault();
         };
 
+        const onChange = (event) => {
+            const value = event.target.value?.trim();
+
+            if (value === props.separator) {
+                inputRef.current.value = '';
+
+                return;
+            }
+
+            if (props.separator && value.endsWith(props.separator)) {
+                const trimmedValue = value.slice(0, -1);
+
+                addItem(event, trimmedValue);
+            }
+        };
+
         const onPaste = (event) => {
             if (props.separator) {
                 let separator = props.separator.replace('\\n', '\n').replace('\\r', '\r').replace('\\t', '\t');
@@ -372,9 +382,11 @@ export const Chips = React.memo(
                     ref: inputRef,
                     placeholder: props.placeholder,
                     type: 'text',
+                    enterKeyHint: 'enter',
                     name: props.name,
                     disabled: props.disabled || isMaxedOut(),
                     onKeyDown: (e) => onKeyDown(e),
+                    onChange: (e) => onChange(e),
                     onPaste: (e) => onPaste(e),
                     onFocus: (e) => onFocus(e),
                     onBlur: (e) => onBlur(e),