Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: onSearch be call onBlur #1085

Closed
5 changes: 3 additions & 2 deletions src/BaseSelect/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -454,8 +454,9 @@ const BaseSelect = React.forwardRef<BaseSelectRef, BaseSelectProps>((props, ref)
};

// Close will clean up single mode search text
// mode not in ['combobox', 'multiple', 'tags', undefined]
React.useEffect(() => {
if (!mergedOpen && !multiple && mode !== 'combobox') {
if (!mergedOpen && !multiple && mode && mode !== 'combobox') {
su-muzhi marked this conversation as resolved.
Show resolved Hide resolved
onInternalSearch('', false, false);
}
}, [mergedOpen]);
Expand Down Expand Up @@ -603,7 +604,7 @@ const BaseSelect = React.forwardRef<BaseSelectRef, BaseSelectProps>((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',
Expand Down
103 changes: 103 additions & 0 deletions tests/Blur.test.tsx
Original file line number Diff line number Diff line change
@@ -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<RefOptionListProps, OptionListProps>(() => (
<div className="popup">Popup</div>
));

describe('Select.Blur', () => {
it('mode with undefined, onBlur source is blur', () => {
const onSearch = jest.fn();
const { container } = render(
<BaseSelect
prefixCls="rc-select"
id="test"
displayValues={[]}
onDisplayValuesChange={() => {}}
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(
<BaseSelect
prefixCls="rc-select"
mode="multiple"
id="test"
displayValues={[]}
onDisplayValuesChange={() => {}}
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(
<BaseSelect
prefixCls="rc-select"
mode="multiple"
id="test"
displayValues={[]}
onDisplayValuesChange={() => {}}
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' });
});
su-muzhi marked this conversation as resolved.
Show resolved Hide resolved

it('click item and blur should trigger onBlur but not trigger onSearch', () => {
const onSearch = jest.fn();
const onBlur = jest.fn();

const Demo = () => (
<Select onSearch={onSearch} showSearch onBlur={onBlur}>
<Option value="11">11</Option>
<Option value="22">22</Option>
<Option value="33">33</Option>
</Select>
);

const { container } = render(<Demo />);
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);
});
});
4 changes: 2 additions & 2 deletions tests/Select.test.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -595,12 +595,12 @@ describe('Select.Basic', () => {
selectItem(container);
expect(handleSearch).toHaveBeenCalledTimes(1);

// Should trigger onBlur
// 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(3);
expect(handleSearch).toHaveBeenCalledTimes(2);
su-muzhi marked this conversation as resolved.
Show resolved Hide resolved

jest.useRealTimers();
});
Expand Down
3 changes: 2 additions & 1 deletion tests/shared/inputFilterTest.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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', () => {
Expand Down