feat(select): allows select the behavior of triggering blur event in …

…tags mode.
react-component · Jul 20, 2023 · 278bcea · 278bcea
1 parent 7d140b7
commit 278bcea
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 8 deletions.
diff --git 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
@@ -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
@@ -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();