feat: add onBlurAddValue & onBlurRemoveSpaces APIs for Select tags mode

Author: aojunhao123

README.md

@@ -133,7 +133,7 @@ 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 | - |
-| onBlurRemoveSpace | Whether to remove space when losing focus, only applies when `mode` is `tags` | boolean | true |
+| 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

@@ -164,7 +164,7 @@ export interface SelectProps<ValueType = any, OptionType extends BaseOptionType
   onChange?: (value: ValueType, option: OptionType | OptionType[]) => void;
 
   // >>> tags mode only
-  onBlurRemoveSpace?: boolean;
+  onBlurRemoveSpaces?: boolean;
   onBlurAddValue?: boolean;
 }
 
@@ -216,7 +216,7 @@ const Select = React.forwardRef<BaseSelectRef, SelectProps<any, DefaultOptionTyp
       maxCount,
 
       // tags mode only
-      onBlurRemoveSpace = true,
+      onBlurRemoveSpaces = true,
       onBlurAddValue = true,
 
       ...restProps
@@ -583,9 +583,9 @@ const Select = React.forwardRef<BaseSelectRef, SelectProps<any, DefaultOptionTyp
 
       // [Submit] Tag mode should flush input
       if (info.source === 'submit') {
-        const formatted = onBlurRemoveSpace ? (searchText || '').trim() : searchText || '';
+        const formatted = onBlurRemoveSpaces ? (searchText || '').trim() : searchText || '';
         // prevent empty tags from appearing when you click the Enter button
-        if (formatted && onBlurAddValue) {
+        if (formatted.trim() && onBlurAddValue) {
           const newRawValues = Array.from(new Set<RawValueType>([...rawValues, formatted]));
           triggerChange(newRawValues);
           triggerSelect(formatted, true);

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 ');
+  });
 });