From 14e0a33227df0a55ec89b0b3fcff4914a3107140 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=B0=8F=E8=B1=AA?= Date: Sun, 20 Oct 2024 21:35:39 +0800 Subject: [PATCH 1/3] feat: support overriding default component behavior for the onBlur event in tags mode --- src/Select.tsx | 15 ++++++++++++--- 1 file changed, 12 insertions(+), 3 deletions(-) diff --git a/src/Select.tsx b/src/Select.tsx index 88fa5aaa..84be7d86 100644 --- a/src/Select.tsx +++ b/src/Select.tsx @@ -162,6 +162,10 @@ export interface SelectProps void; + + // >>> tags mode only + onBlurRemoveSpace?: 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; } From 8dee5affd0b1c34876b83e837656803b73122b9e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=B0=8F=E8=B1=AA?= <1844749591@qq.com> Date: Sun, 20 Oct 2024 23:20:44 +0800 Subject: [PATCH 2/3] docs: add documentation for new props --- README.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/README.md b/README.md index 91814eb7..492049d1 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 | - | +| onBlurRemoveSpace | Whether to remove space 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 From 5afe84fb02eced718b756fe22d877aca7440ae20 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=B0=8F=E8=B1=AA?= <1844749591@qq.com> Date: Sun, 3 Nov 2024 00:09:12 +0800 Subject: [PATCH 3/3] feat: add onBlurAddValue & onBlurRemoveSpaces APIs for Select tags mode --- README.md | 2 +- docs/examples/tags.tsx | 34 ++++++++++++++++++++++++++++++++++ src/Select.tsx | 8 ++++---- tests/Tags.test.tsx | 18 ++++++++++++++++++ 4 files changed, 57 insertions(+), 5 deletions(-) diff --git a/README.md b/README.md index 492049d1..672f808e 100644 --- a/README.md +++ b/README.md @@ -133,7 +133,7 @@ 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 | - | -| 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 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 84be7d86..b052e0b5 100644 --- a/src/Select.tsx +++ b/src/Select.tsx @@ -164,7 +164,7 @@ export interface SelectProps void; // >>> tags mode only - onBlurRemoveSpace?: boolean; + onBlurRemoveSpaces?: boolean; onBlurAddValue?: boolean; } @@ -216,7 +216,7 @@ const Select = React.forwardRef([...rawValues, formatted])); triggerChange(newRawValues); triggerSelect(formatted, true); 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 '); + }); });