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

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

Hide file tree

Showing 3 changed files with 28 additions and 1 deletion.
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"
+          preventCommitOnBlur={false}
           style={{ width: 400 }}
           disabled={disabled}
           maxTagCount={maxTagCount}
@@ -88,6 +89,7 @@ const Test: React.FC = () => {
         <Select
           placeholder="placeholder"
           mode="tags"
+          preventCommitOnBlur={false}
           style={{ width: 500 }}
           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
+  preventCommitOnBlur?: boolean
 }
 
 function isRawValue(value: DraftValueType): value is RawValueType {
@@ -198,6 +201,9 @@ const Select = React.forwardRef(
       labelInValue,
       onChange,
 
+      // Blur
+      preventCommitOnBlur = false,
+
       ...restProps
     } = props;
 
@@ -536,6 +542,12 @@ const Select = React.forwardRef(
       setSearchValue(searchText);
       setActiveValue(null);
 
+      if(preventCommitOnBlur){
+        triggerChange('');
+        setSearchValue('');
+        return
+      }
+
       // [Submit] Tag mode should flush input
       if (info.source === 'submit') {
         const formatted = (searchText || '').trim();
@@ -546,7 +558,6 @@ const Select = React.forwardRef(
           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} preventCommitOnBlur={true} />);
+
+    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();