From f3255659befed0e0d02cefc99762480ab1f51a1d Mon Sep 17 00:00:00 2001 From: suzhi Date: Tue, 12 Nov 2024 12:08:39 +0800 Subject: [PATCH 1/7] fix: onSearch be call onBlur --- src/BaseSelect/index.tsx | 2 +- tests/Select.test.tsx | 10 +++++----- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/src/BaseSelect/index.tsx b/src/BaseSelect/index.tsx index a2a15e8c..811ad01f 100644 --- a/src/BaseSelect/index.tsx +++ b/src/BaseSelect/index.tsx @@ -435,7 +435,7 @@ const BaseSelect = React.forwardRef((props, ref) if (onSearch && mergedSearchValue !== newSearchText) { onSearch(newSearchText, { - source: fromTyping ? 'typing' : 'effect', + source: fromTyping ? 'typing' : mergedShowSearch ? 'blur' : 'effect', }); } diff --git a/tests/Select.test.tsx b/tests/Select.test.tsx index a37330dd..be417979 100644 --- a/tests/Select.test.tsx +++ b/tests/Select.test.tsx @@ -596,11 +596,11 @@ describe('Select.Basic', () => { expect(handleSearch).toHaveBeenCalledTimes(1); // Should trigger onBlur - fireEvent.change(container.querySelector('input'), { target: { value: '3' } }); - expect(handleSearch).toHaveBeenCalledTimes(2); - fireEvent.blur(container.querySelector('input')); - jest.runAllTimers(); - expect(handleSearch).toHaveBeenCalledTimes(3); + // fireEvent.change(container.querySelector('input'), { target: { value: '3' } }); + // expect(handleSearch).toHaveBeenCalledTimes(2); + // fireEvent.blur(container.querySelector('input')); + // jest.runAllTimers(); + // expect(handleSearch).toHaveBeenCalledTimes(3); jest.useRealTimers(); }); From 567a8989389a2c6bccb94089fae9f28831b3850f Mon Sep 17 00:00:00 2001 From: suzhi Date: Tue, 12 Nov 2024 12:15:46 +0800 Subject: [PATCH 2/7] tests: add test case --- tests/BaseSelect.test.tsx | 49 +++++++++++++++++++++++++++++++++++++++ 1 file changed, 49 insertions(+) diff --git a/tests/BaseSelect.test.tsx b/tests/BaseSelect.test.tsx index 6a1fb514..72b8c23b 100644 --- a/tests/BaseSelect.test.tsx +++ b/tests/BaseSelect.test.tsx @@ -123,4 +123,53 @@ describe('BaseSelect', () => { expect(container.querySelector('.rc-select-dropdown-placement-fallback')).toBeTruthy(); }); + + describe("Testing BaseSelect component's onContainerBlur params", () => { + it('mode with null, onContainerBlur params is blur', () => { + const onSearch = jest.fn(); + const { container } = render( + {}} + searchValue="1" + showSearch + open + onSearch={onSearch} + OptionList={OptionList} + emptyOptions + />, + ); + expect(container.querySelector('div.rc-select')).toBeTruthy(); + fireEvent.change(container.querySelector('input'), { target: { value: '2' } }); + expect(onSearch).toHaveBeenCalledWith('2', { source: 'typing' }); + fireEvent.blur(container.querySelector('div.rc-select')); + expect(onSearch).toHaveBeenCalledWith('', { source: 'blur' }); + }); + + it('mode with multiple, onContainerBlur params is blur', () => { + const onSearch = jest.fn(); + const { container } = render( + {}} + searchValue="1" + showSearch={false} + open + onSearch={onSearch} + OptionList={OptionList} + emptyOptions + />, + ); + expect(container.querySelector('div.rc-select')).toBeTruthy(); + fireEvent.change(container.querySelector('input'), { target: { value: '2' } }); + expect(onSearch).toHaveBeenCalledWith('2', { source: 'typing' }); + fireEvent.blur(container.querySelector('div.rc-select')); + expect(onSearch).toHaveBeenCalledWith('', { source: 'blur' }); + }); + }); }); From a47fa765ba1ad037a9a26ee82e3aad0852691d3a Mon Sep 17 00:00:00 2001 From: suzhi Date: Tue, 12 Nov 2024 14:41:08 +0800 Subject: [PATCH 3/7] tests: update tests case --- tests/BaseSelect.test.tsx | 2 +- tests/Select.test.tsx | 7 ------- 2 files changed, 1 insertion(+), 8 deletions(-) diff --git a/tests/BaseSelect.test.tsx b/tests/BaseSelect.test.tsx index 72b8c23b..d0642e17 100644 --- a/tests/BaseSelect.test.tsx +++ b/tests/BaseSelect.test.tsx @@ -158,7 +158,7 @@ describe('BaseSelect', () => { displayValues={[]} onDisplayValuesChange={() => {}} searchValue="1" - showSearch={false} + showSearch open onSearch={onSearch} OptionList={OptionList} diff --git a/tests/Select.test.tsx b/tests/Select.test.tsx index be417979..9e69e02a 100644 --- a/tests/Select.test.tsx +++ b/tests/Select.test.tsx @@ -595,13 +595,6 @@ describe('Select.Basic', () => { selectItem(container); expect(handleSearch).toHaveBeenCalledTimes(1); - // Should trigger onBlur - // fireEvent.change(container.querySelector('input'), { target: { value: '3' } }); - // expect(handleSearch).toHaveBeenCalledTimes(2); - // fireEvent.blur(container.querySelector('input')); - // jest.runAllTimers(); - // expect(handleSearch).toHaveBeenCalledTimes(3); - jest.useRealTimers(); }); From c4fd9479e67d4aa0beb7776df2ae27198a01104e Mon Sep 17 00:00:00 2001 From: suzhi Date: Tue, 12 Nov 2024 16:54:55 +0800 Subject: [PATCH 4/7] fix: onBlur should trigger blur when mode is null --- src/BaseSelect/index.tsx | 6 +++--- tests/BaseSelect.test.tsx | 6 ++---- tests/Select.test.tsx | 7 +++++++ 3 files changed, 12 insertions(+), 7 deletions(-) diff --git a/src/BaseSelect/index.tsx b/src/BaseSelect/index.tsx index 811ad01f..8a535d1f 100644 --- a/src/BaseSelect/index.tsx +++ b/src/BaseSelect/index.tsx @@ -435,7 +435,7 @@ const BaseSelect = React.forwardRef((props, ref) if (onSearch && mergedSearchValue !== newSearchText) { onSearch(newSearchText, { - source: fromTyping ? 'typing' : mergedShowSearch ? 'blur' : 'effect', + source: fromTyping ? 'typing' : 'effect', }); } @@ -455,7 +455,7 @@ const BaseSelect = React.forwardRef((props, ref) // Close will clean up single mode search text React.useEffect(() => { - if (!mergedOpen && !multiple && mode !== 'combobox') { + if (!mergedOpen && !multiple && mode && mode !== 'combobox') { onInternalSearch('', false, false); } }, [mergedOpen]); @@ -603,7 +603,7 @@ const BaseSelect = React.forwardRef((props, ref) // `tags` mode should move `searchValue` into values if (mode === 'tags') { onSearch(mergedSearchValue, { source: 'submit' }); - } else if (mode === 'multiple') { + } else if (!mode || mode === 'multiple') { // `multiple` mode only clean the search value but not trigger event onSearch('', { source: 'blur', diff --git a/tests/BaseSelect.test.tsx b/tests/BaseSelect.test.tsx index d0642e17..9f0a9cc7 100644 --- a/tests/BaseSelect.test.tsx +++ b/tests/BaseSelect.test.tsx @@ -125,7 +125,7 @@ describe('BaseSelect', () => { }); describe("Testing BaseSelect component's onContainerBlur params", () => { - it('mode with null, onContainerBlur params is blur', () => { + it('mode with null, onBlur source is blur', () => { const onSearch = jest.fn(); const { container } = render( { onDisplayValuesChange={() => {}} searchValue="1" showSearch - open onSearch={onSearch} OptionList={OptionList} emptyOptions @@ -148,7 +147,7 @@ describe('BaseSelect', () => { expect(onSearch).toHaveBeenCalledWith('', { source: 'blur' }); }); - it('mode with multiple, onContainerBlur params is blur', () => { + it('mode with multiple, onBlur source is blur', () => { const onSearch = jest.fn(); const { container } = render( { onDisplayValuesChange={() => {}} searchValue="1" showSearch - open onSearch={onSearch} OptionList={OptionList} emptyOptions diff --git a/tests/Select.test.tsx b/tests/Select.test.tsx index 9e69e02a..bc77cd96 100644 --- a/tests/Select.test.tsx +++ b/tests/Select.test.tsx @@ -595,6 +595,13 @@ describe('Select.Basic', () => { selectItem(container); expect(handleSearch).toHaveBeenCalledTimes(1); + // Should not trigger onBlur + fireEvent.change(container.querySelector('input'), { target: { value: '3' } }); + expect(handleSearch).toHaveBeenCalledTimes(2); + fireEvent.blur(container.querySelector('input')); + jest.runAllTimers(); + expect(handleSearch).toHaveBeenCalledTimes(2); + jest.useRealTimers(); }); From 53fef45b997398d49f4ba9a997cf775f341131ac Mon Sep 17 00:00:00 2001 From: suzhi Date: Thu, 14 Nov 2024 10:53:11 +0800 Subject: [PATCH 5/7] test: add Select case --- tests/Select.test.tsx | 24 ++++++++++++++++++++++++ 1 file changed, 24 insertions(+) diff --git a/tests/Select.test.tsx b/tests/Select.test.tsx index bc77cd96..2ff65ed4 100644 --- a/tests/Select.test.tsx +++ b/tests/Select.test.tsx @@ -2367,4 +2367,28 @@ describe('Select.Basic', () => { expect(element[0]).not.toHaveClass('rc-select-item-option-disabled'); expect(element[1]).toHaveClass('rc-select-item-option-disabled'); }); + + it('click item and blur should trigger onBlur but not trigger onSearch', () => { + const onSearch = jest.fn(); + const onBlur = jest.fn(); + + const Demo = () => ( + + ); + + const { container } = render(); + const input = container.querySelector('input'); + fireEvent.change(input, { target: { value: '1' } }); + fireEvent.click( + container.querySelectorAll('.rc-select-dropdown .rc-select-item-option-content')[0], + ); + fireEvent.blur(input); + expect(container.querySelector('.rc-select-dropdown-hidden')).toBeTruthy(); + expect(onSearch).toHaveBeenCalledTimes(1); + expect(onBlur).toHaveBeenCalledTimes(1); + }); }); From e57a56a5131b7fc2bd0c3ceaabd9b9c0277cb6a0 Mon Sep 17 00:00:00 2001 From: suzhi Date: Tue, 10 Dec 2024 17:22:22 +0800 Subject: [PATCH 6/7] tests: fix mode is single but not correct behavior --- src/BaseSelect/index.tsx | 1 + tests/BaseSelect.test.tsx | 47 -------------- tests/Blur.test.tsx | 103 +++++++++++++++++++++++++++++++ tests/Select.test.tsx | 24 ------- tests/shared/inputFilterTest.tsx | 3 +- 5 files changed, 106 insertions(+), 72 deletions(-) create mode 100644 tests/Blur.test.tsx diff --git a/src/BaseSelect/index.tsx b/src/BaseSelect/index.tsx index 8a535d1f..82b199fb 100644 --- a/src/BaseSelect/index.tsx +++ b/src/BaseSelect/index.tsx @@ -454,6 +454,7 @@ const BaseSelect = React.forwardRef((props, ref) }; // Close will clean up single mode search text + // mode not in ['combobox', 'multiple', 'tags', undefined] React.useEffect(() => { if (!mergedOpen && !multiple && mode && mode !== 'combobox') { onInternalSearch('', false, false); diff --git a/tests/BaseSelect.test.tsx b/tests/BaseSelect.test.tsx index 9f0a9cc7..6a1fb514 100644 --- a/tests/BaseSelect.test.tsx +++ b/tests/BaseSelect.test.tsx @@ -123,51 +123,4 @@ describe('BaseSelect', () => { expect(container.querySelector('.rc-select-dropdown-placement-fallback')).toBeTruthy(); }); - - describe("Testing BaseSelect component's onContainerBlur params", () => { - it('mode with null, onBlur source is blur', () => { - const onSearch = jest.fn(); - const { container } = render( - {}} - searchValue="1" - showSearch - onSearch={onSearch} - OptionList={OptionList} - emptyOptions - />, - ); - expect(container.querySelector('div.rc-select')).toBeTruthy(); - fireEvent.change(container.querySelector('input'), { target: { value: '2' } }); - expect(onSearch).toHaveBeenCalledWith('2', { source: 'typing' }); - fireEvent.blur(container.querySelector('div.rc-select')); - expect(onSearch).toHaveBeenCalledWith('', { source: 'blur' }); - }); - - it('mode with multiple, onBlur source is blur', () => { - const onSearch = jest.fn(); - const { container } = render( - {}} - searchValue="1" - showSearch - onSearch={onSearch} - OptionList={OptionList} - emptyOptions - />, - ); - expect(container.querySelector('div.rc-select')).toBeTruthy(); - fireEvent.change(container.querySelector('input'), { target: { value: '2' } }); - expect(onSearch).toHaveBeenCalledWith('2', { source: 'typing' }); - fireEvent.blur(container.querySelector('div.rc-select')); - expect(onSearch).toHaveBeenCalledWith('', { source: 'blur' }); - }); - }); }); diff --git a/tests/Blur.test.tsx b/tests/Blur.test.tsx new file mode 100644 index 00000000..acba4f76 --- /dev/null +++ b/tests/Blur.test.tsx @@ -0,0 +1,103 @@ +import type { OptionListProps, RefOptionListProps } from '@/OptionList'; +import { fireEvent, render } from '@testing-library/react'; +import { forwardRef } from 'react'; +import BaseSelect from '../src/BaseSelect'; +import Select, { Option } from '../src'; + +const OptionList = forwardRef(() => ( +
Popup
+)); + +describe('Select.Blur', () => { + it('mode with undefined, onBlur source is blur', () => { + const onSearch = jest.fn(); + const { container } = render( + {}} + searchValue="1" + showSearch + onSearch={onSearch} + OptionList={OptionList} + emptyOptions + />, + ); + expect(container.querySelector('div.rc-select')).toBeTruthy(); + fireEvent.change(container.querySelector('input'), { target: { value: '2' } }); + expect(onSearch).toHaveBeenCalledWith('2', { source: 'typing' }); + fireEvent.blur(container.querySelector('div.rc-select')); + expect(onSearch).toHaveBeenCalledWith('', { source: 'blur' }); + }); + + it('mode with multiple, onBlur source is blur', () => { + const onSearch = jest.fn(); + const { container } = render( + {}} + searchValue="1" + showSearch + onSearch={onSearch} + OptionList={OptionList} + emptyOptions + />, + ); + expect(container.querySelector('div.rc-select')).toBeTruthy(); + fireEvent.change(container.querySelector('input'), { target: { value: '2' } }); + expect(onSearch).toHaveBeenCalledWith('2', { source: 'typing' }); + fireEvent.blur(container.querySelector('div.rc-select')); + expect(onSearch).toHaveBeenCalledWith('', { source: 'blur' }); + }); + + it('mode with multiple, onBlur source is blur', () => { + const onSearch = jest.fn(); + const { container } = render( + {}} + searchValue="1" + showSearch + onSearch={onSearch} + OptionList={OptionList} + emptyOptions + />, + ); + expect(container.querySelector('div.rc-select')).toBeTruthy(); + fireEvent.change(container.querySelector('input'), { target: { value: '2' } }); + expect(onSearch).toHaveBeenCalledWith('2', { source: 'typing' }); + fireEvent.blur(container.querySelector('div.rc-select')); + expect(onSearch).toHaveBeenCalledWith('', { source: 'blur' }); + }); + + it('click item and blur should trigger onBlur but not trigger onSearch', () => { + const onSearch = jest.fn(); + const onBlur = jest.fn(); + + const Demo = () => ( + + ); + + const { container } = render(); + const input = container.querySelector('input'); + fireEvent.change(input, { target: { value: '1' } }); + fireEvent.click( + container.querySelectorAll('.rc-select-dropdown .rc-select-item-option-content')[0], + ); + fireEvent.blur(input); + expect(container.querySelector('.rc-select-dropdown-hidden')).toBeTruthy(); + expect(onSearch).toHaveBeenCalledTimes(1); + expect(onBlur).toHaveBeenCalledTimes(1); + }); +}); diff --git a/tests/Select.test.tsx b/tests/Select.test.tsx index 2ff65ed4..bc77cd96 100644 --- a/tests/Select.test.tsx +++ b/tests/Select.test.tsx @@ -2367,28 +2367,4 @@ describe('Select.Basic', () => { expect(element[0]).not.toHaveClass('rc-select-item-option-disabled'); expect(element[1]).toHaveClass('rc-select-item-option-disabled'); }); - - it('click item and blur should trigger onBlur but not trigger onSearch', () => { - const onSearch = jest.fn(); - const onBlur = jest.fn(); - - const Demo = () => ( - - ); - - const { container } = render(); - const input = container.querySelector('input'); - fireEvent.change(input, { target: { value: '1' } }); - fireEvent.click( - container.querySelectorAll('.rc-select-dropdown .rc-select-item-option-content')[0], - ); - fireEvent.blur(input); - expect(container.querySelector('.rc-select-dropdown-hidden')).toBeTruthy(); - expect(onSearch).toHaveBeenCalledTimes(1); - expect(onBlur).toHaveBeenCalledTimes(1); - }); }); diff --git a/tests/shared/inputFilterTest.tsx b/tests/shared/inputFilterTest.tsx index a64f8a53..37ff6b5a 100644 --- a/tests/shared/inputFilterTest.tsx +++ b/tests/shared/inputFilterTest.tsx @@ -22,7 +22,8 @@ export default function inputFilterTest(mode: any) { expect(container.querySelector('.rc-select')).toHaveClass('rc-select-open'); expect(container.querySelector('input')).toHaveValue('1'); fireEvent.click(container.querySelector('.rc-select-item-option')); - expect(container.querySelector('input')).toHaveValue(mode === 'single' ? '' : '1'); + const isMultiple = mode === 'multiple' || mode === 'tags'; + expect(container.querySelector('input')).toHaveValue(!isMultiple ? '' : '1'); }); it('should clear input filter after select', () => { From 0152915c550b94c58844d8e7c49013218c6434c3 Mon Sep 17 00:00:00 2001 From: suzhi Date: Tue, 10 Dec 2024 17:33:05 +0800 Subject: [PATCH 7/7] tests: clean repetition test case --- tests/Blur.test.tsx | 23 ----------------------- 1 file changed, 23 deletions(-) diff --git a/tests/Blur.test.tsx b/tests/Blur.test.tsx index acba4f76..522be6d9 100644 --- a/tests/Blur.test.tsx +++ b/tests/Blur.test.tsx @@ -54,29 +54,6 @@ describe('Select.Blur', () => { expect(onSearch).toHaveBeenCalledWith('', { source: 'blur' }); }); - it('mode with multiple, onBlur source is blur', () => { - const onSearch = jest.fn(); - const { container } = render( - {}} - searchValue="1" - showSearch - onSearch={onSearch} - OptionList={OptionList} - emptyOptions - />, - ); - expect(container.querySelector('div.rc-select')).toBeTruthy(); - fireEvent.change(container.querySelector('input'), { target: { value: '2' } }); - expect(onSearch).toHaveBeenCalledWith('2', { source: 'typing' }); - fireEvent.blur(container.querySelector('div.rc-select')); - expect(onSearch).toHaveBeenCalledWith('', { source: 'blur' }); - }); - it('click item and blur should trigger onBlur but not trigger onSearch', () => { const onSearch = jest.fn(); const onBlur = jest.fn();