From 2e8d70cae8e3b6fa4f60996beb963aeb31c32d49 Mon Sep 17 00:00:00 2001
From: Yosuke Inoue <6063239+joey-i@users.noreply.github.com>
Date: Fri, 8 Sep 2023 23:40:46 +0900
Subject: [PATCH 1/2] Add separatorsByKeyCode option to set separator by
 keyCode instead of key name when it set. Ideal for multibyte language users.

---
 src/index.tsx | 31 +++++++++++++++++++++++--------
 1 file changed, 23 insertions(+), 8 deletions(-)

diff --git a/src/index.tsx b/src/index.tsx
index b535239..15789af 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -13,6 +13,7 @@ export interface TagsInputProps {
   onChange?: (tags: string[]) => void;
   onBlur?: any;
   separators?: string[];
+  separatorsByKeyCode?: number[];
   disableBackspaceRemove?: boolean;
   onExisting?: (tag: string) => void;
   onRemoved?: (tag: string) => void;
@@ -35,6 +36,7 @@ export const TagsInput = ({
   onChange,
   onBlur,
   separators,
+  separatorsByKeyCode,
   disableBackspaceRemove,
   onExisting,
   onRemoved,
@@ -70,17 +72,30 @@ export const TagsInput = ({
       e.target.value = isEditOnRemove ? `${tags.at(-1)} ` : "";
       setTags([...tags.slice(0, -1)]);
     }
+    if (separatorsByKeyCode && separatorsByKeyCode.length) {
+      if (text && (separatorsByKeyCode).includes(e.keyCode)) {
+        e.preventDefault();
+        if (beforeAddValidate && !beforeAddValidate(text, tags)) return;
 
-    if (text && (separators || defaultSeparators).includes(e.key)) {
-      e.preventDefault();
-      if (beforeAddValidate && !beforeAddValidate(text, tags)) return;
+        if (tags.includes(text)) {
+          onExisting && onExisting(text);
+          return;
+        }
+        setTags([...tags, text]);
+        e.target.value = "";
+      }
+    } else {
+      if (text && (separators || defaultSeparators).includes(e.key)) {
+        e.preventDefault();
+        if (beforeAddValidate && !beforeAddValidate(text, tags)) return;
 
-      if (tags.includes(text)) {
-        onExisting && onExisting(text);
-        return;
+        if (tags.includes(text)) {
+          onExisting && onExisting(text);
+          return;
+        }
+        setTags([...tags, text]);
+        e.target.value = "";
       }
-      setTags([...tags, text]);
-      e.target.value = "";
     }
   };
 

From 2c2ec2d428bc5e158d35ab029d97952c6626f068 Mon Sep 17 00:00:00 2001
From: Yosuke Inoue <6063239+joey-i@users.noreply.github.com>
Date: Sat, 9 Sep 2023 00:07:13 +0900
Subject: [PATCH 2/2] Update README

---
 README.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/README.md b/README.md
index 9d3e50b..ed5675f 100644
--- a/README.md
+++ b/README.md
@@ -65,6 +65,7 @@ export default Example;
 | `onKeyUp`           | input `onKeyUp` callback                                                        | `event`                                            |                 |
 | `onBlur`            | input `onBlur` callback                                                         | `event`                                            |                 |
 | `separators`         | when to add tag (i.e. `"Enter"`, `" "`)                                        | `string[]`                                         | `["Enter"]`     |
+| `separatorsByKeyCode` | when to add tag by keyCode (i.e. `13` for Enter key). When this option is set, `separators` will be ignored.                                      | `number[]`                                         | `[]`     |
 | `removers`          | Remove last tag if textbox empty and `Backspace` is pressed                     | `string[]`                                         | `["Backspace"]` |
 | `onExisting`        | if tag is already added then callback                                           | `(tag: string) => void`                            |                 |
 | `onRemoved`         | on tag removed callback                                                         | `(tag: string) => void`                            |                 |