From 5c0aea50d7d7935f459c91f4239fc7aaea8851a7 Mon Sep 17 00:00:00 2001
From: Irie Aoi <eai@mizle.net>
Date: Sat, 12 Dec 2020 19:31:51 +0900
Subject: [PATCH] =?UTF-8?q?=E3=82=BF=E3=82=B0=E5=85=A5=E5=8A=9B=E6=AC=84?=
 =?UTF-8?q?=E3=81=8B=E3=82=89=E3=83=95=E3=82=A9=E3=83=BC=E3=82=AB=E3=82=B9?=
 =?UTF-8?q?=E3=81=8C=E5=A4=96=E3=82=8C=E3=81=9F=E6=99=82=E6=96=87=E5=AD=97?=
 =?UTF-8?q?=E3=81=8C=E3=81=82=E3=82=8B=E3=81=AA=E3=82=89=E3=82=BF=E3=82=B0?=
 =?UTF-8?q?=E3=81=A8=E3=81=97=E3=81=A6=E7=A2=BA=E5=AE=9A=E3=81=95=E3=81=9B?=
 =?UTF-8?q?=E3=82=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 resources/assets/js/components/TagInput.tsx | 14 ++++++++++----
 1 file changed, 10 insertions(+), 4 deletions(-)

diff --git a/resources/assets/js/components/TagInput.tsx b/resources/assets/js/components/TagInput.tsx
index 24f664b..1fb1619 100644
--- a/resources/assets/js/components/TagInput.tsx
+++ b/resources/assets/js/components/TagInput.tsx
@@ -23,8 +23,7 @@ export const TagInput: React.FC<TagInputProps> = ({ id, name, values, isInvalid,
                 case 'Enter':
                 case ' ':
                     if ((event as any).isComposing !== true) {
-                        onChange && onChange(values.concat(buffer.trim().replace(/\s+/g, '_')));
-                        setBuffer('');
+                        commitBuffer();
                     }
                     event.preventDefault();
                     break;
@@ -32,8 +31,7 @@ export const TagInput: React.FC<TagInputProps> = ({ id, name, values, isInvalid,
                     // 実際にテキストボックスに入力されている文字を見に行く (フォールバック処理)
                     const nativeEvent = event.nativeEvent;
                     if (nativeEvent.srcElement && (nativeEvent.srcElement as HTMLInputElement).value.slice(-1) == ' ') {
-                        onChange && onChange(values.concat(buffer.trim().replace(/\s+/g, '_')));
-                        setBuffer('');
+                        commitBuffer();
                         event.preventDefault();
                     }
                     break;
@@ -45,6 +43,13 @@ export const TagInput: React.FC<TagInputProps> = ({ id, name, values, isInvalid,
         }
     };
 
+    const commitBuffer = () => {
+        const newTag = buffer.trim().replace(/\s+/g, '_');
+        if (newTag.length === 0) return;
+        onChange && onChange(values.concat(newTag));
+        setBuffer('');
+    };
+
     return (
         <div className={containerClass} onClick={() => inputRef.current?.focus()}>
             <input name={name} type="hidden" value={values.join(' ')} />
@@ -66,6 +71,7 @@ export const TagInput: React.FC<TagInputProps> = ({ id, name, values, isInvalid,
                         className="tis-tag-input-field"
                         value={buffer}
                         onChange={(e) => setBuffer(e.target.value)}
+                        onBlur={commitBuffer}
                         onKeyDown={onKeyDown}
                     />
                 </li>