From 278bcea29576e8fdd72b9ef399231e7c0bdba40c Mon Sep 17 00:00:00 2001
From: Circkoooooo <2389451262@qq.com>
Date: Thu, 20 Jul 2023 20:28:10 +0800
Subject: [PATCH] feat(select): allows select the behavior of triggering blur
 event in tags mode.

---
 docs/examples/tags.tsx |  1 +
 src/Select.tsx         | 27 +++++++++++++++++++--------
 tests/Tags.test.tsx    | 14 ++++++++++++++
 3 files changed, 34 insertions(+), 8 deletions(-)

diff --git a/docs/examples/tags.tsx b/docs/examples/tags.tsx
index bfc62cbe2..cd63f2efe 100644
--- a/docs/examples/tags.tsx
+++ b/docs/examples/tags.tsx
@@ -39,6 +39,7 @@ const Test: React.FC = () => {
         <Select
           placeholder="placeholder"
           mode="tags"
+          tagsModeCommitOnBlur={false}
           style={{ width: 400 }}
           disabled={disabled}
           maxTagCount={maxTagCount}
diff --git a/src/Select.tsx b/src/Select.tsx
index c5b5ad1b4..1426b3701 100644
--- a/src/Select.tsx
+++ b/src/Select.tsx
@@ -152,6 +152,9 @@ export interface SelectProps<ValueType = any, OptionType extends BaseOptionType
   value?: ValueType | null;
   defaultValue?: ValueType | null;
   onChange?: (value: ValueType, option: OptionType | OptionType[]) => void;
+
+  // >>> Blur
+  tagsModeCommitOnBlur?: boolean
 }
 
 function isRawValue(value: DraftValueType): value is RawValueType {
@@ -198,6 +201,9 @@ const Select = React.forwardRef(
       labelInValue,
       onChange,
 
+      // Blur
+      tagsModeCommitOnBlur = true,
+
       ...restProps
     } = props;
 
@@ -538,15 +544,20 @@ const Select = React.forwardRef(
 
       // [Submit] Tag mode should flush input
       if (info.source === 'submit') {
-        const formatted = (searchText || '').trim();
-        // prevent empty tags from appearing when you click the Enter button
-        if (formatted) {
-          const newRawValues = Array.from(new Set<RawValueType>([...rawValues, formatted]));
-          triggerChange(newRawValues);
-          triggerSelect(formatted, true);
-          setSearchValue('');
+        if(!tagsModeCommitOnBlur){
+          // prevent empty tags from appearing when you click the Enter button
+            triggerChange('');
+            setSearchValue('');
+        }else{
+          const formatted = (searchText || '').trim();
+          // prevent empty tags from appearing when you click the Enter button
+          if (formatted) {
+            const newRawValues = Array.from(new Set<RawValueType>([...rawValues, formatted]));
+            triggerChange(newRawValues);
+            triggerSelect(formatted, true);
+            setSearchValue('');
+          }
         }
-
         return;
       }
 
diff --git a/tests/Tags.test.tsx b/tests/Tags.test.tsx
index f8bb05df1..5c8bd9e05 100644
--- a/tests/Tags.test.tsx
+++ b/tests/Tags.test.tsx
@@ -63,6 +63,20 @@ describe('Select.Tags', () => {
     expect(onChange).toHaveBeenCalledWith(['foo'], [{}]);
   });
 
+  it('should not call on blur when set attribute tagsModeCommitOnBlur equals false', () => {
+    const onChange = jest.fn();
+    const wrapper = mount(<Select mode="tags" onChange={onChange} tagsModeCommitOnBlur={false} />);
+
+    wrapper
+      .find('input')
+      .simulate('change', { target: { value: 'foo' } })
+      .simulate('blur');
+
+    jest.runAllTimers();
+    expect(findSelection(wrapper).text()).toBe("");
+    expect(onChange).toHaveBeenCalledWith([''], [{}]);
+  });
+
   it('tokenize input', () => {
     const handleChange = jest.fn();
     const handleSelect = jest.fn();