feat: support overriding default component behavior for the onBlur event in tags mode

README.md

@@ -133,6 +133,8 @@ export default () => (
 | optionRender | Custom rendering options | (oriOption: FlattenOptionData\<BaseOptionType\> , info: { index: number }) => React.ReactNode | - |
 | labelRender  | Custom rendering label   |  (props: LabelInValueType) => React.ReactNode   | - |
 | maxCount | The max number of items can be selected | number | - |
+| onBlurRemoveSpaces | Whether to remove spaces when losing focus, only applies when `mode` is `tags` | boolean | true |
+| onBlurAddValue | Whether to add the input value to the selected item when losing focus, only applies when `mode` is `tags` | boolean | true |
 
 ### Methods
 

docs/examples/tags.tsx

@@ -111,6 +111,40 @@ const Test: React.FC = () => {
           {children}
         </Select>
       </div>
+      <h2>tags select with onBlurRemoveSpaces = false</h2>
+      <div>
+        <Select
+          placeholder="placeholder"
+          mode="tags"
+          style={{ width: 500 }}
+          disabled={disabled}
+          maxTagCount={maxTagCount}
+          maxTagTextLength={10}
+          value={value}
+          onBlurRemoveSpaces={false}
+          onChange={(val) => {
+            console.log('change:', val);
+            setValue(val);
+          }}
+        />
+      </div>
+      <h2>tags select with onBlurAddValue = false</h2>
+      <div>
+        <Select
+          placeholder="placeholder"
+          mode="tags"
+          style={{ width: 500 }}
+          disabled={disabled}
+          maxTagCount={maxTagCount}
+          maxTagTextLength={10}
+          value={value}
+          onBlurAddValue={false}
+          onChange={(val) => {
+            console.log('change:', val);
+            setValue(val);
+          }}
+        />
+      </div>
     </div>
   );
 };

src/Select.tsx

@@ -162,6 +162,10 @@ export interface SelectProps<ValueType = any, OptionType extends BaseOptionType
   defaultValue?: ValueType | null;
   maxCount?: number;
   onChange?: (value: ValueType, option: OptionType | OptionType[]) => void;
+
+  // >>> tags mode only
+  onBlurRemoveSpaces?: boolean;
+  onBlurAddValue?: boolean;
 }
 
 function isRawValue(value: DraftValueType): value is RawValueType {
@@ -211,6 +215,10 @@ const Select = React.forwardRef<BaseSelectRef, SelectProps<any, DefaultOptionTyp
       onChange,
       maxCount,
 
+      // tags mode only
+      onBlurRemoveSpaces = true,
+      onBlurAddValue = true,
+
       ...restProps
     } = props;
 
@@ -575,15 +583,16 @@ const Select = React.forwardRef<BaseSelectRef, SelectProps<any, DefaultOptionTyp
 
       // [Submit] Tag mode should flush input
       if (info.source === 'submit') {
-        const formatted = (searchText || '').trim();
+        const formatted = onBlurRemoveSpaces ? (searchText || '').trim() : searchText || '';
         // prevent empty tags from appearing when you click the Enter button
-        if (formatted) {
+        if (formatted.trim() && onBlurAddValue) {
           const newRawValues = Array.from(new Set<RawValueType>([...rawValues, formatted]));
           triggerChange(newRawValues);
           triggerSelect(formatted, true);
-          setSearchValue('');
         }
 
+        setSearchValue('');
+
         return;
       }
 

tests/Tags.test.tsx

@@ -540,4 +540,22 @@ describe('Select.Tags', () => {
     });
     expect(onChange).not.toBeCalled();
   });
+
+  it('should not add value when onBlurAddValue is false', () => {
+    const { container } = render(<Select mode="tags" onBlurAddValue={false} />);
+    const input = container.querySelector<HTMLInputElement>('input');
+    toggleOpen(container);
+    fireEvent.change(input, { target: { value: 'test' } });
+    keyDown(input, KeyCode.TAB);
+    // no selection item
+    expect(container.querySelectorAll('.rc-select-selection-item')).toHaveLength(0);
+  });
+
+  it('should not add value when onBlurRemoveSpaces is false', () => {
+    const { container } = render(<Select mode="tags" onBlurRemoveSpaces={false} />);
+    toggleOpen(container);
+    fireEvent.change(container.querySelector('input'), { target: { value: ' test ' } });
+    keyDown(container.querySelector('input'), KeyCode.ENTER);
+    expect(findSelection(container).textContent).toEqual(' test ');
+  });
 });