diff --git a/README.md b/README.md index 91814eb7..672f808e 100644 --- a/README.md +++ b/README.md @@ -133,6 +133,8 @@ export default () => ( | optionRender | Custom rendering options | (oriOption: FlattenOptionData\ , 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 diff --git a/docs/examples/tags.tsx b/docs/examples/tags.tsx index bfc62cbe..0d29329a 100644 --- a/docs/examples/tags.tsx +++ b/docs/examples/tags.tsx @@ -111,6 +111,40 @@ const Test: React.FC = () => { {children} +

tags select with onBlurRemoveSpaces = false

+
+ { + console.log('change:', val); + setValue(val); + }} + /> +
); }; diff --git a/src/Select.tsx b/src/Select.tsx index 88fa5aaa..b052e0b5 100644 --- a/src/Select.tsx +++ b/src/Select.tsx @@ -162,6 +162,10 @@ export interface SelectProps void; + + // >>> tags mode only + onBlurRemoveSpaces?: boolean; + onBlurAddValue?: boolean; } function isRawValue(value: DraftValueType): value is RawValueType { @@ -211,6 +215,10 @@ const Select = React.forwardRef([...rawValues, formatted])); triggerChange(newRawValues); triggerSelect(formatted, true); - setSearchValue(''); } + setSearchValue(''); + return; } diff --git a/tests/Tags.test.tsx b/tests/Tags.test.tsx index 830db1e3..d3d78bd9 100644 --- a/tests/Tags.test.tsx +++ b/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(); + toggleOpen(container); + fireEvent.change(container.querySelector('input'), { target: { value: ' test ' } }); + keyDown(container.querySelector('input'), KeyCode.ENTER); + expect(findSelection(container).textContent).toEqual(' test '); + }); });