From 3f8c624df4e000d8cc28c6c6f2a96c2b1a11c0ea Mon Sep 17 00:00:00 2001 From: suzhi Date: Wed, 6 Nov 2024 19:05:24 +0800 Subject: [PATCH 1/4] =?UTF-8?q?fix:=20multiple=20=E4=B8=8B=E6=B8=85?= =?UTF-8?q?=E7=A9=BA=E6=97=B6=E5=B0=91=E8=A7=A6=E5=8F=91=E4=B8=80=E6=AC=A1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/BaseSelect/index.tsx | 12 ++++++++--- tests/Select.test.tsx | 43 ++++++++++++++++++++++++++++++++++++++++ 2 files changed, 52 insertions(+), 3 deletions(-) diff --git a/src/BaseSelect/index.tsx b/src/BaseSelect/index.tsx index a2a15e8c7..3eb15dfd4 100644 --- a/src/BaseSelect/index.tsx +++ b/src/BaseSelect/index.tsx @@ -605,9 +605,15 @@ const BaseSelect = React.forwardRef((props, ref) onSearch(mergedSearchValue, { source: 'submit' }); } else if (mode === 'multiple') { // `multiple` mode only clean the search value but not trigger event - onSearch('', { - source: 'blur', - }); + if (mergedShowSearch) { + onSearch('', { + source: 'effect', + }); + } else { + onSearch('', { + source: 'blur', + }); + } } } diff --git a/tests/Select.test.tsx b/tests/Select.test.tsx index a37330ddd..caca556c5 100644 --- a/tests/Select.test.tsx +++ b/tests/Select.test.tsx @@ -605,6 +605,49 @@ describe('Select.Basic', () => { jest.useRealTimers(); }); + describe('should call handleSearch twice on search and blur', () => { + injectRunAllTimers(jest); + + beforeEach(() => { + jest.useFakeTimers(); + }); + + afterEach(() => { + jest.useRealTimers(); + }); + + it('multiple mode should call handleSearch twice on search and blur', async () => { + const handleSearch = jest.fn(); + const { container } = render( + , + ); + fireEvent.change(container.querySelector('input')!, { target: { value: '1' } }); + // 模拟失去焦点（blur）事件 + fireEvent.blur(container.querySelector('input')); + jest.runAllTimers(); + expect(handleSearch).toHaveBeenCalledTimes(2); + jest.useRealTimers(); + }); + + it('not multiple mode should call handleSearch twice on search and blur', async () => { + const handleSearch = jest.fn(); + const { container } = render( + , + ); + fireEvent.change(container.querySelector('input')!, { target: { value: '1' } }); + fireEvent.blur(container.querySelector('input')); + jest.runAllTimers(); + expect(handleSearch).toHaveBeenCalledTimes(2); + jest.useRealTimers(); + }); + }); + it('should render 0 as text properly', () => { const data = [ { text: 0, value: '=0' }, From 9a44b6ef4c9092fbb409d95896575f5940789609 Mon Sep 17 00:00:00 2001 From: suzhi Date: Mon, 11 Nov 2024 13:57:46 +0800 Subject: [PATCH 2/4] test: add unit tests for BaseSelct --- tests/BaseSelect.test.tsx | 52 ++++++++++++++++++++++++++++++++++++++- 1 file changed, 51 insertions(+), 1 deletion(-) diff --git a/tests/BaseSelect.test.tsx b/tests/BaseSelect.test.tsx index 6a1fb514b..ce5c113ba 100644 --- a/tests/BaseSelect.test.tsx +++ b/tests/BaseSelect.test.tsx @@ -1,6 +1,6 @@ import type { OptionListProps, RefOptionListProps } from '@/OptionList'; import { fireEvent, render } from '@testing-library/react'; -import { forwardRef, act } from 'react'; +import { forwardRef, act, useState } from 'react'; import BaseSelect from '../src/BaseSelect'; const OptionList = forwardRef(() => ( @@ -123,4 +123,54 @@ describe('BaseSelect', () => { expect(container.querySelector('.rc-select-dropdown-placement-fallback')).toBeTruthy(); }); + + describe("Testing BaseSelect component's onContainerBlur params", () => { + it('BaseSelect with showSearch, onContainerBlur params is effect', () => { + 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: 'effect' }); + }); + + it('BaseSelect without showSearch, 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 20e01d68dda9dde7d0014ae12d6ba5eefb6719d6 Mon Sep 17 00:00:00 2001 From: suzhi Date: Mon, 11 Nov 2024 14:18:54 +0800 Subject: [PATCH 3/4] refactor: use ternary operator instead of if-else --- src/BaseSelect/index.tsx | 12 +++--------- 1 file changed, 3 insertions(+), 9 deletions(-) diff --git a/src/BaseSelect/index.tsx b/src/BaseSelect/index.tsx index 3eb15dfd4..5a421c044 100644 --- a/src/BaseSelect/index.tsx +++ b/src/BaseSelect/index.tsx @@ -605,15 +605,9 @@ const BaseSelect = React.forwardRef((props, ref) onSearch(mergedSearchValue, { source: 'submit' }); } else if (mode === 'multiple') { // `multiple` mode only clean the search value but not trigger event - if (mergedShowSearch) { - onSearch('', { - source: 'effect', - }); - } else { - onSearch('', { - source: 'blur', - }); - } + onSearch('', { + source: mergedShowSearch ? 'effect' : 'blur', + }); } } From f02c24d36f7a37e778f879a716bb32394108d20f Mon Sep 17 00:00:00 2001 From: suzhi Date: Mon, 11 Nov 2024 14:20:34 +0800 Subject: [PATCH 4/4] chore: resolve ESLint errors --- tests/BaseSelect.test.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/tests/BaseSelect.test.tsx b/tests/BaseSelect.test.tsx index ce5c113ba..e154711f2 100644 --- a/tests/BaseSelect.test.tsx +++ b/tests/BaseSelect.test.tsx @@ -1,6 +1,6 @@ import type { OptionListProps, RefOptionListProps } from '@/OptionList'; import { fireEvent, render } from '@testing-library/react'; -import { forwardRef, act, useState } from 'react'; +import { forwardRef, act } from 'react'; import BaseSelect from '../src/BaseSelect'; const OptionList = forwardRef(() => (