Skip to content

Commit a75000d

Browse files
committed
feat(select): allows select the behavior of triggering blur event in tags mode.
1 parent 278bcea commit a75000d

File tree

3 files changed

+18
-16
lines changed

3 files changed

+18
-16
lines changed

docs/examples/tags.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,7 @@ const Test: React.FC = () => {
3939
<Select
4040
placeholder="placeholder"
4141
mode="tags"
42-
tagsModeCommitOnBlur={false}
42+
preventCommitOnBlur={false}
4343
style={{ width: 400 }}
4444
disabled={disabled}
4545
maxTagCount={maxTagCount}

src/Select.tsx

Lines changed: 16 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -154,7 +154,7 @@ export interface SelectProps<ValueType = any, OptionType extends BaseOptionType
154154
onChange?: (value: ValueType, option: OptionType | OptionType[]) => void;
155155

156156
// >>> Blur
157-
tagsModeCommitOnBlur?: boolean
157+
preventCommitOnBlur?: boolean
158158
}
159159

160160
function isRawValue(value: DraftValueType): value is RawValueType {
@@ -202,7 +202,7 @@ const Select = React.forwardRef(
202202
onChange,
203203

204204
// Blur
205-
tagsModeCommitOnBlur = true,
205+
preventCommitOnBlur = false,
206206

207207
...restProps
208208
} = props;
@@ -542,22 +542,24 @@ const Select = React.forwardRef(
542542
setSearchValue(searchText);
543543
setActiveValue(null);
544544

545+
if(preventCommitOnBlur){
546+
triggerChange('');
547+
setSearchValue('');
548+
return
549+
}
550+
545551
// [Submit] Tag mode should flush input
546552
if (info.source === 'submit') {
547-
if(!tagsModeCommitOnBlur){
548553
// prevent empty tags from appearing when you click the Enter button
549-
triggerChange('');
550-
setSearchValue('');
551-
}else{
552-
const formatted = (searchText || '').trim();
553-
// prevent empty tags from appearing when you click the Enter button
554-
if (formatted) {
555-
const newRawValues = Array.from(new Set<RawValueType>([...rawValues, formatted]));
556-
triggerChange(newRawValues);
557-
triggerSelect(formatted, true);
558-
setSearchValue('');
559-
}
554+
const formatted = (searchText || '').trim();
555+
// prevent empty tags from appearing when you click the Enter button
556+
if (formatted) {
557+
const newRawValues = Array.from(new Set<RawValueType>([...rawValues, formatted]));
558+
triggerChange(newRawValues);
559+
triggerSelect(formatted, true);
560+
setSearchValue('');
560561
}
562+
561563
return;
562564
}
563565

tests/Tags.test.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -65,7 +65,7 @@ describe('Select.Tags', () => {
6565

6666
it('should not call on blur when set attribute tagsModeCommitOnBlur equals false', () => {
6767
const onChange = jest.fn();
68-
const wrapper = mount(<Select mode="tags" onChange={onChange} tagsModeCommitOnBlur={false} />);
68+
const wrapper = mount(<Select mode="tags" onChange={onChange} preventCommitOnBlur={true} />);
6969

7070
wrapper
7171
.find('input')

0 commit comments

Comments
 (0)