diff --git a/README.md b/README.md index 55c589b04..4514c6086 100644 --- a/README.md +++ b/README.md @@ -132,6 +132,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 | - | +| nativeInputProps | Passing props to the native input | `React.InputHTMLAttributes` | - | ### Methods diff --git a/src/BaseSelect.tsx b/src/BaseSelect.tsx index 3208301d1..1d74b7ea0 100644 --- a/src/BaseSelect.tsx +++ b/src/BaseSelect.tsx @@ -133,6 +133,7 @@ export interface BaseSelectProps extends BaseSelectPrivateProps, React.AriaAttri tagRender?: (props: CustomTagProps) => React.ReactElement; direction?: 'ltr' | 'rtl'; maxLength?: number; + nativeInputProps?: React.InputHTMLAttributes; // MISC tabIndex?: number; @@ -219,6 +220,7 @@ const BaseSelect = React.forwardRef((props, ref) tagRender, direction, omitDomProps, + nativeInputProps, // Value displayValues, @@ -792,6 +794,7 @@ const BaseSelect = React.forwardRef((props, ref) onSearchSubmit={onInternalSearchSubmit} onRemove={onSelectorRemove} tokenWithEnter={tokenWithEnter} + nativeInputProps={nativeInputProps} /> )} diff --git a/src/SelectNativeInput.tsx b/src/SelectNativeInput.tsx new file mode 100644 index 000000000..22c0800a7 --- /dev/null +++ b/src/SelectNativeInput.tsx @@ -0,0 +1,24 @@ +import classNames from 'classnames'; +import React from 'react'; + +interface SelectNativeInputProps extends React.InputHTMLAttributes { + prefixCls?: string; +} + +export default React.forwardRef( + function SelectNativeInput(props, ref) { + const { prefixCls, className, ...rest } = props; + + return ( + + ); + }, +); diff --git a/src/Selector/MultipleSelector.tsx b/src/Selector/MultipleSelector.tsx index 8ad890256..198f71585 100644 --- a/src/Selector/MultipleSelector.tsx +++ b/src/Selector/MultipleSelector.tsx @@ -9,6 +9,7 @@ import Input from './Input'; import useLayoutEffect from '../hooks/useLayoutEffect'; import type { DisplayValueType, RenderNode, CustomTagProps, RawValueType } from '../BaseSelect'; import { getTitle } from '../utils/commonUtil'; +import SelectNativeInput from '../SelectNativeInput'; function itemKey(value: DisplayValueType) { return value.key ?? value.value; @@ -42,6 +43,7 @@ const SelectSelector: React.FC = (props) => { const { id, prefixCls, + nativeInputProps, values, open, @@ -232,9 +234,19 @@ const SelectSelector: React.FC = (props) => { /> ); + const selectNativeInputValue = values + .filter((item) => item.value !== null || item.value !== undefined) + .map((item) => String(item.value)) + .join(','); + return ( <> {selectionNode} + {!values.length && !inputValue && ( {placeholder} )} diff --git a/src/Selector/SingleSelector.tsx b/src/Selector/SingleSelector.tsx index 7fd7f69be..c9ca9b15d 100644 --- a/src/Selector/SingleSelector.tsx +++ b/src/Selector/SingleSelector.tsx @@ -3,6 +3,7 @@ import pickAttrs from 'rc-util/lib/pickAttrs'; import Input from './Input'; import type { InnerSelectorProps } from '.'; import { getTitle } from '../utils/commonUtil'; +import SelectNativeInput from '../SelectNativeInput'; interface SelectorProps extends InnerSelectorProps { inputElement: React.ReactElement; @@ -24,6 +25,7 @@ const SingleSelector: React.FC = (props) => { values, placeholder, tabIndex, + nativeInputProps, showSearch, searchValue, @@ -106,6 +108,12 @@ const SingleSelector: React.FC = (props) => { /> + + {/* Display value */} {!combobox && item ? ( ; placeholder?: React.ReactNode; @@ -65,6 +66,7 @@ export interface SelectorProps { autoClearSearchValue: boolean; inputElement: JSX.Element; maxLength?: number; + nativeInputProps?: BaseSelectProps['nativeInputProps'] autoFocus?: boolean; activeDescendantId?: string; diff --git a/tests/Accessibility.test.tsx b/tests/Accessibility.test.tsx index e2996f745..aedb2c525 100644 --- a/tests/Accessibility.test.tsx +++ b/tests/Accessibility.test.tsx @@ -18,7 +18,7 @@ describe('Select.Accessibility', () => { it('pass aria info to internal input', () => { const MySelect = Select as any; const wrapper = mount(); - expect(wrapper.find('input').props()).toEqual( + expect(wrapper.find('.rc-select-selection-search-input').props()).toEqual( expect.objectContaining({ 'aria-label': 'light', }), @@ -48,7 +48,7 @@ describe('Select.Accessibility', () => { ); // First Match - wrapper.find('input').simulate('change', { target: { value: 'b' } }); + wrapper.find('.rc-select-selection-search-input').simulate('change', { target: { value: 'b' } }); jest.runAllTimers(); expectOpen(wrapper); @@ -56,12 +56,12 @@ describe('Select.Accessibility', () => { wrapper.find('.rc-select-item-option-active .rc-select-item-option-content').text(), ).toEqual('Bamboo'); - wrapper.find('input').simulate('keyDown', { which: KeyCode.ENTER }); + wrapper.find('.rc-select-selection-search-input').simulate('keyDown', { which: KeyCode.ENTER }); expectOpen(wrapper, false); // Next Match - wrapper.find('input').simulate('change', { target: { value: '' } }); - wrapper.find('input').simulate('change', { target: { value: 'g' } }); + wrapper.find('.rc-select-selection-search-input').simulate('change', { target: { value: '' } }); + wrapper.find('.rc-select-selection-search-input').simulate('change', { target: { value: 'g' } }); jest.runAllTimers(); expectOpen(wrapper); diff --git a/tests/Combobox.test.tsx b/tests/Combobox.test.tsx index c063f8faa..c0ca18d43 100644 --- a/tests/Combobox.test.tsx +++ b/tests/Combobox.test.tsx @@ -60,7 +60,7 @@ describe('Select.Combobox', () => { , ); - expect(wrapper.find('input').props().value).toEqual('1'); + expect(wrapper.find('.rc-select-selection-search-input').props().value).toEqual('1'); }); it('placeholder', () => { @@ -71,11 +71,11 @@ describe('Select.Combobox', () => { , ); - expect(wrapper.find('input').props().value).toBe(''); + expect(wrapper.find('.rc-select-selection-search-input').props().value).toBe(''); expect(wrapper.find('.rc-select-selection-placeholder').text()).toEqual('placeholder'); - wrapper.find('input').simulate('change', { target: { value: '1' } }); + wrapper.find('.rc-select-selection-search-input').simulate('change', { target: { value: '1' } }); expect(wrapper.find('.rc-select-selection-placeholder').length).toBe(0); - expect(wrapper.find('input').props().value).toBe('1'); + expect(wrapper.find('.rc-select-selection-search-input').props().value).toBe('1'); }); it('fire change event immediately when user inputing', () => { @@ -87,10 +87,10 @@ describe('Select.Combobox', () => { , ); - wrapper.find('input').simulate('change', { target: { value: '1' } }); + wrapper.find('.rc-select-selection-search-input').simulate('change', { target: { value: '1' } }); expect(handleChange).toHaveBeenCalledWith('1', {}); - wrapper.find('input').simulate('change', { target: { value: '22' } }); + wrapper.find('.rc-select-selection-search-input').simulate('change', { target: { value: '22' } }); expect(handleChange).toHaveBeenCalledWith( '22', expect.objectContaining({ @@ -110,7 +110,7 @@ describe('Select.Combobox', () => { toggleOpen(wrapper); selectItem(wrapper); - expect(wrapper.find('input').props().value).toEqual('1'); + expect(wrapper.find('.rc-select-selection-search-input').props().value).toEqual('1'); }); describe('input value', () => { @@ -126,20 +126,20 @@ describe('Select.Combobox', () => { const wrapper = createSelect({ defaultValue: '1', }); - expect(wrapper.find('input').props().value).toBe('1'); + expect(wrapper.find('.rc-select-selection-search-input').props().value).toBe('1'); }); it('displays correct input value for value', () => { const wrapper = createSelect({ value: '1', }); - expect(wrapper.find('input').props().value).toBe('1'); + expect(wrapper.find('.rc-select-selection-search-input').props().value).toBe('1'); }); it('displays correct input value when value changes', () => { const wrapper = createSelect(); wrapper.setProps({ value: '1' }); - expect(wrapper.find('input').props().value).toBe('1'); + expect(wrapper.find('.rc-select-selection-search-input').props().value).toBe('1'); }); }); @@ -182,8 +182,8 @@ describe('Select.Combobox', () => { } } const wrapper = mount(); - wrapper.find('input').simulate('focus'); - wrapper.find('input').simulate('change', { target: { value: '0' } }); + wrapper.find('.rc-select-selection-search-input').simulate('focus'); + wrapper.find('.rc-select-selection-search-input').simulate('change', { target: { value: '0' } }); jest.runAllTimers(); wrapper.update(); expectOpen(wrapper); @@ -231,8 +231,8 @@ describe('Select.Combobox', () => { } } const wrapper = mount(); - wrapper.find('input').simulate('focus'); - wrapper.find('input').simulate('change', { target: { value: '0' } }); + wrapper.find('.rc-select-selection-search-input').simulate('focus'); + wrapper.find('.rc-select-selection-search-input').simulate('change', { target: { value: '0' } }); expectOpen(wrapper); selectItem(wrapper); @@ -252,14 +252,14 @@ describe('Select.Combobox', () => { , ); - const input = wrapper.find('input'); + const input = wrapper.find('.rc-select-selection-search-input'); input.simulate('keyDown', { which: KeyCode.DOWN }); - expect(wrapper.find('input').props().value).toEqual('One'); + expect(wrapper.find('.rc-select-selection-search-input').props().value).toEqual('One'); expect(handleChange).not.toHaveBeenCalled(); expect(handleSelect).not.toHaveBeenCalled(); input.simulate('keyDown', { which: KeyCode.ENTER }); - expect(wrapper.find('input').props().value).toEqual('One'); + expect(wrapper.find('.rc-select-selection-search-input').props().value).toEqual('One'); expect(handleChange).toHaveBeenCalledWith('One', expect.objectContaining({ value: 'One' })); expect(handleSelect).toHaveBeenCalledWith('One', expect.objectContaining({ value: 'One' })); }); @@ -274,7 +274,7 @@ describe('Select.Combobox', () => { wrapper.find('.rc-select-item-option').first().simulate('mouseMove'); - expect(wrapper.find('input').props().value).toBeFalsy(); + expect(wrapper.find('.rc-select-selection-search-input').props().value).toBeFalsy(); }); // https://github.com/ant-design/ant-design/issues/25345 @@ -308,7 +308,7 @@ describe('Select.Combobox', () => { const wrapper = mount(); function input() { - return wrapper.find('input'); + return wrapper.find('.rc-select-selection-search-input'); } input().simulate('change', { target: { value: 'light' } }); @@ -355,9 +355,9 @@ describe('Select.Combobox', () => { , ); - wrapper.find('input').simulate('change', { target: { value: '1' } }); + wrapper.find('.rc-select-selection-search-input').simulate('change', { target: { value: '1' } }); expect(wrapper.find('.rc-select-clear-icon').length).toBeTruthy(); - wrapper.find('input').simulate('change', { target: { value: '' } }); + wrapper.find('.rc-select-selection-search-input').simulate('change', { target: { value: '' } }); expect(wrapper.find('.rc-select-clear-icon').length).toBeFalsy(); }); @@ -388,11 +388,11 @@ describe('Select.Combobox', () => { } const wrapper = mount(); - wrapper.find('input').simulate('change', { target: { value: 'a' } }); - wrapper.find('input').simulate('change', { target: { value: 'ab' } }); - expect(wrapper.find('input').props().value).toBe('ab'); + wrapper.find('.rc-select-selection-search-input').simulate('change', { target: { value: 'a' } }); + wrapper.find('.rc-select-selection-search-input').simulate('change', { target: { value: 'ab' } }); + expect(wrapper.find('.rc-select-selection-search-input').props().value).toBe('ab'); selectItem(wrapper, 1); - expect(wrapper.find('input').prop('value')).toBe('abab'); + expect(wrapper.find('.rc-select-selection-search-input').prop('value')).toBe('abab'); }); it("when value change to '', searchValue will change to '' ", () => { @@ -458,7 +458,7 @@ describe('Select.Combobox', () => { , ); - wrapper.find('input').simulate('keyDown', { + wrapper.find('.rc-select-selection-search-input').simulate('keyDown', { which: KeyCode.ENTER, }); jest.runAllTimers(); @@ -482,7 +482,7 @@ describe('Select.Combobox', () => { wrapper.update(); expectOpen(wrapper, false); - expect(wrapper.find('input').props().value).toEqual(''); + expect(wrapper.find('.rc-select-selection-search-input').props().value).toEqual(''); }); it('should keep close after blur', async () => { @@ -497,12 +497,12 @@ describe('Select.Combobox', () => { // Click again should not close popup for (let i = 0; i < 10; i += 1) { - wrapper.find('input').simulate('mouseDown'); + wrapper.find('.rc-select-selection-search-input').simulate('mouseDown'); wrapper.update(); expectOpen(wrapper); } - wrapper.find('input').simulate('blur'); + wrapper.find('.rc-select-selection-search-input').simulate('blur'); await delay(100); wrapper.update(); @@ -512,18 +512,18 @@ describe('Select.Combobox', () => { it('expect null value display empty string', () => { const wrapper = mount(); - expect(wrapper.find('input').props().maxLength).toBeFalsy(); + expect(wrapper.find('.rc-select-selection-search-input').props().maxLength).toBeFalsy(); }); it('normal should not support', () => { const wrapper = mount(); - wrapper.find('input').simulate('compositionStart', { target: { value: '' } }); - wrapper.find('input').simulate('change', { target: { value: 'a' } }); + wrapper.find('.rc-select-selection-search-input').simulate('compositionStart', { target: { value: '' } }); + wrapper.find('.rc-select-selection-search-input').simulate('change', { target: { value: 'a' } }); expect(onChange).toHaveBeenCalledTimes(1); expect(onChange).toHaveBeenLastCalledWith('a', expect.anything()); - wrapper.find('input').simulate('change', { target: { value: '啊' } }); + wrapper.find('.rc-select-selection-search-input').simulate('change', { target: { value: '啊' } }); expect(onChange).toHaveBeenCalledTimes(2); expect(onChange).toHaveBeenLastCalledWith('啊', expect.anything()); - wrapper.find('input').simulate('compositionEnd', { target: { value: '啊' } }); + wrapper.find('.rc-select-selection-search-input').simulate('compositionEnd', { target: { value: '啊' } }); expect(onChange).toHaveBeenCalledTimes(2); }); @@ -585,12 +585,12 @@ describe('Select.Combobox', () => { jest.useFakeTimers(); const { container, rerender } = render(); - expect(wrapper.find('input').props().value).toBe('0'); + expect(wrapper.find('.rc-select-selection-search-input').props().value).toBe('0'); }); }); diff --git a/tests/Group.test.tsx b/tests/Group.test.tsx index c5dc79abe..2d5376af2 100644 --- a/tests/Group.test.tsx +++ b/tests/Group.test.tsx @@ -13,7 +13,7 @@ describe('Select.Group', () => { , ); - wrapper.find('input').simulate('change', { target: { value: 'zombiej' } }); + wrapper.find('.rc-select-selection-search-input').simulate('change', { target: { value: 'zombiej' } }); expect(wrapper.find('List').props().data).toEqual([ expect.objectContaining({ group: true, data: expect.objectContaining({ label: 'zombiej' }) }), expect.objectContaining({ data: expect.objectContaining({ value: '1' }) }), @@ -31,7 +31,7 @@ describe('Select.Group', () => { , ); - wrapper.find('input').simulate('change', { target: { value: '1' } }); + wrapper.find('.rc-select-selection-search-input').simulate('change', { target: { value: '1' } }); expect(wrapper.find('List').props().data).toHaveLength(2); }); diff --git a/tests/Multiple.test.tsx b/tests/Multiple.test.tsx index 6e6a051af..f47a931a8 100644 --- a/tests/Multiple.test.tsx +++ b/tests/Multiple.test.tsx @@ -51,7 +51,7 @@ describe('Select.Multiple', () => { , ); - wrapper.find('input').simulate('change', { + wrapper.find('.rc-select-selection-search-input').simulate('change', { target: { value: 'One', }, @@ -59,7 +59,7 @@ describe('Select.Multiple', () => { expect(handleChange).not.toHaveBeenCalled(); handleChange.mockReset(); - wrapper.find('input').simulate('change', { + wrapper.find('.rc-select-selection-search-input').simulate('change', { target: { value: 'One,Two,Three', }, @@ -68,14 +68,14 @@ describe('Select.Multiple', () => { // Seems this is should not fire event? Commented for now. // handleChange.mockReset(); - // wrapper.find('input').simulate('change', { + // wrapper.find('.rc-select-selection-search-input').simulate('change', { // target: { // value: 'One,Two', // }, // }); // expect(handleChange).toHaveBeenCalledWith(['1', '2'], expect.anything()); - expect(wrapper.find('input').props().value).toBe(''); + expect(wrapper.find('.rc-select-selection-search-input').props().value).toBe(''); wrapper.update(); expectOpen(wrapper, false); }); @@ -96,7 +96,7 @@ describe('Select.Multiple', () => { , ); - wrapper.find('input').simulate('change', { + wrapper.find('.rc-select-selection-search-input').simulate('change', { target: { value: 'One', }, @@ -104,7 +104,7 @@ describe('Select.Multiple', () => { expect(handleChange).not.toHaveBeenCalled(); handleChange.mockReset(); - wrapper.find('input').simulate('change', { + wrapper.find('.rc-select-selection-search-input').simulate('change', { target: { value: 'One,Two,Three,', }, @@ -113,14 +113,14 @@ describe('Select.Multiple', () => { // Seems this is should not fire event? Commented for now. // handleChange.mockReset(); - // wrapper.find('input').simulate('change', { + // wrapper.find('.rc-select-selection-search-input').simulate('change', { // target: { // value: 'One,Two,', // }, // }); // expect(handleChange).toHaveBeenCalledWith(['One', 'Two', 'Three'], expect.anything()); - expect(wrapper.find('input').props().value).toBe(''); + expect(wrapper.find('.rc-select-selection-search-input').props().value).toBe(''); }); it("shouldn't separate words when compositing", () => { @@ -143,7 +143,7 @@ describe('Select.Multiple', () => { , ); - wrapper.find('input').simulate('change', { + wrapper.find('.rc-select-selection-search-input').simulate('change', { target: { value: 'One', }, @@ -151,8 +151,8 @@ describe('Select.Multiple', () => { expect(handleChange).not.toHaveBeenCalled(); handleChange.mockReset(); - wrapper.find('input').simulate('compositionstart'); - wrapper.find('input').simulate('change', { + wrapper.find('.rc-select-selection-search-input').simulate('compositionstart'); + wrapper.find('.rc-select-selection-search-input').simulate('change', { target: { value: 'One,Two,Three', }, @@ -160,8 +160,8 @@ describe('Select.Multiple', () => { expect(handleChange).not.toHaveBeenCalled(); handleChange.mockReset(); - wrapper.find('input').simulate('compositionend'); - wrapper.find('input').simulate('change', { + wrapper.find('.rc-select-selection-search-input').simulate('compositionend'); + wrapper.find('.rc-select-selection-search-input').simulate('change', { target: { value: 'One,Two,Three', }, @@ -170,14 +170,14 @@ describe('Select.Multiple', () => { // Seems this is should not fire event? Commented for now. // handleChange.mockReset(); - // wrapper.find('input').simulate('change', { + // wrapper.find('.rc-select-selection-search-input').simulate('change', { // target: { // value: 'One,Two', // }, // }); // expect(handleChange).toHaveBeenCalledWith(['1', '2'], expect.anything()); - expect(wrapper.find('input').props().value).toBe(''); + expect(wrapper.find('.rc-select-selection-search-input').props().value).toBe(''); wrapper.update(); expectOpen(wrapper, false); }); @@ -199,7 +199,7 @@ describe('Select.Multiple', () => { , ); - wrapper.find('input').simulate('change', { + wrapper.find('.rc-select-selection-search-input').simulate('change', { target: { value: 'One,Two', }, @@ -224,7 +224,7 @@ describe('Select.Multiple', () => { , ); - wrapper.find('input').simulate('change', { + wrapper.find('.rc-select-selection-search-input').simulate('change', { target: { value: 'One,Two', }, @@ -241,7 +241,7 @@ describe('Select.Multiple', () => { , ); - wrapper.find('input').simulate('focus'); + wrapper.find('.rc-select-selection-search-input').simulate('focus'); jest.runAllTimers(); expect(handleFocus).toHaveBeenCalled(); jest.useRealTimers(); @@ -317,7 +317,7 @@ describe('Select.Multiple', () => { toggleOpen(wrapper); wrapper.find('div.rc-select-item-option').at(1).simulate('mouseMove'); - wrapper.find('input').simulate('keyDown', { which: KeyCode.ENTER }); + wrapper.find('.rc-select-selection-search-input').simulate('keyDown', { which: KeyCode.ENTER }); expectOpen(wrapper); expect(wrapper.find('Selector').props().values).toEqual([ expect.objectContaining({ value: 2 }), @@ -334,10 +334,10 @@ describe('Select.Multiple', () => { toggleOpen(wrapper); wrapper.find('div.rc-select-item-option').first().simulate('mousemove'); - wrapper.find('input').simulate('keyDown', { which: KeyCode.ENTER }); + wrapper.find('.rc-select-selection-search-input').simulate('keyDown', { which: KeyCode.ENTER }); wrapper.find('div.rc-select-item-option').first().simulate('mousemove'); - wrapper.find('input').simulate('keyDown', { which: KeyCode.ENTER }); + wrapper.find('.rc-select-selection-search-input').simulate('keyDown', { which: KeyCode.ENTER }); expect(wrapper.find('Selector').props().values).toEqual([]); }); @@ -398,20 +398,20 @@ describe('Select.Multiple', () => { ); // First type - wrapper.find('input').simulate('keydown', { which: KeyCode.L }); - wrapper.find('input').simulate('change', { target: { value: 'l' } }); + wrapper.find('.rc-select-selection-search-input').simulate('keydown', { which: KeyCode.L }); + wrapper.find('.rc-select-selection-search-input').simulate('change', { target: { value: 'l' } }); // Backspace - wrapper.find('input').simulate('keydown', { which: KeyCode.BACKSPACE }); - wrapper.find('input').simulate('change', { target: { value: '' } }); + wrapper.find('.rc-select-selection-search-input').simulate('keydown', { which: KeyCode.BACKSPACE }); + wrapper.find('.rc-select-selection-search-input').simulate('change', { target: { value: '' } }); onChange.mockReset(); - wrapper.find('input').simulate('keydown', { which: KeyCode.BACKSPACE }); + wrapper.find('.rc-select-selection-search-input').simulate('keydown', { which: KeyCode.BACKSPACE }); expect(onChange).not.toHaveBeenCalled(); jest.runAllTimers(); - wrapper.find('input').simulate('keydown', { which: KeyCode.BACKSPACE }); + wrapper.find('.rc-select-selection-search-input').simulate('keydown', { which: KeyCode.BACKSPACE }); expect(onChange).toHaveBeenCalledWith([], expect.anything()); jest.useRealTimers(); @@ -427,13 +427,13 @@ describe('Select.Multiple', () => { it('clear input when popup closed', () => { const wrapper = mount(, ); - expect(wrapper.find('input').props().value).toBe(''); + expect(wrapper.find('.rc-select-selection-search-input').props().value).toBe(''); }); it('search value should show when autoClearSearchValue is false', () => { const wrapper = mount( @@ -657,7 +657,7 @@ describe('Select.Multiple', () => { searchValue="test" />, ); - expect(wrapper.find('input').props().value).toBe('test'); + expect(wrapper.find('.rc-select-selection-search-input').props().value).toBe('test'); }); it('search value should no clear when autoClearSearchValue is false', () => { const wrapper = mount( @@ -671,7 +671,7 @@ describe('Select.Multiple', () => { toggleOpen(wrapper); toggleOpen(wrapper); - expect(wrapper.find('input').props().value).toBe('test'); + expect(wrapper.find('.rc-select-selection-search-input').props().value).toBe('test'); }); it('search value should clear when autoClearSearchValue is true', () => { const wrapper = mount( @@ -679,7 +679,7 @@ describe('Select.Multiple', () => { ); toggleOpen(wrapper); toggleOpen(wrapper); - expect(wrapper.find('input').props().value).toBe(''); + expect(wrapper.find('.rc-select-selection-search-input').props().value).toBe(''); }); }); }); diff --git a/tests/Select.test.tsx b/tests/Select.test.tsx index 413c80bf3..0270c3e2e 100644 --- a/tests/Select.test.tsx +++ b/tests/Select.test.tsx @@ -359,7 +359,7 @@ describe('Select.Basic', () => { , ); - expect(wrapper.find('input').getDOMNode().getAttribute('readonly')).toBeFalsy(); + expect(wrapper.find('.rc-select-selection-search-input').getDOMNode().getAttribute('readonly')).toBeFalsy(); }); it('filter options by "value" prop by default', () => { @@ -370,7 +370,7 @@ describe('Select.Basic', () => { , ); - wrapper.find('input').simulate('change', { target: { value: '1' } }); + wrapper.find('.rc-select-selection-search-input').simulate('change', { target: { value: '1' } }); expect(wrapper.find('List').props().data.length).toBe(1); expect(wrapper.find('div.rc-select-item-option-content').text()).toBe('One'); }); @@ -383,7 +383,7 @@ describe('Select.Basic', () => { , ); - wrapper.find('input').simulate('change', { target: { value: '2' } }); + wrapper.find('.rc-select-selection-search-input').simulate('change', { target: { value: '2' } }); expect(wrapper.find('List').props().data.length).toBe(1); expect(wrapper.find('div.rc-select-item-option-content').text()).toBe('Two'); }); @@ -396,7 +396,7 @@ describe('Select.Basic', () => { , ); - wrapper.find('input').simulate('change', { target: { value: '1' } }); + wrapper.find('.rc-select-selection-search-input').simulate('change', { target: { value: '1' } }); expect(wrapper.find('List').props().data.length).toBe(2); }); @@ -412,7 +412,7 @@ describe('Select.Basic', () => { , ); - wrapper.find('input').simulate('change', { target: { value: 'Two' } }); + wrapper.find('.rc-select-selection-search-input').simulate('change', { target: { value: 'Two' } }); expect(wrapper.find('List').props().data.length).toBe(1); expect(wrapper.find('div.rc-select-item-option-content').text()).toBe('2'); @@ -430,7 +430,7 @@ describe('Select.Basic', () => { , ); - wrapper.find('input').simulate('change', { target: { value: 'Two2' } }); + wrapper.find('.rc-select-selection-search-input').simulate('change', { target: { value: 'Two2' } }); expect(wrapper.find('List').props().data.length).toBe(1); expect(wrapper.find('div.rc-select-item-option-content').text()).toBe('Two2'); @@ -468,7 +468,7 @@ describe('Select.Basic', () => { , ); - wrapper.find('input').simulate('keyDown', { keyCode: 40 }); + wrapper.find('.rc-select-selection-search-input').simulate('keyDown', { keyCode: 40 }); expectOpen(wrapper); }); @@ -539,10 +539,10 @@ describe('Select.Basic', () => { , ); - wrapper.find('input').simulate('change', { target: { value: '1' } }); + wrapper.find('.rc-select-selection-search-input').simulate('change', { target: { value: '1' } }); expect(handleSearch).toHaveBeenCalledWith('1'); - wrapper.find('input').simulate('change', { target: { value: '' } }); + wrapper.find('.rc-select-selection-search-input').simulate('change', { target: { value: '' } }); }); it('not fires search event when user select', () => { @@ -567,7 +567,7 @@ describe('Select.Basic', () => { ); for (let i = 0; i < 10; i += 1) { - wrapper.find('input').simulate('mousedown'); + wrapper.find('.rc-select-selection-search-input').simulate('mousedown'); expectOpen(wrapper); } }); @@ -585,7 +585,7 @@ describe('Select.Basic', () => { , ); - wrapper.find('input').simulate('change', { target: { value: '1' } }); + wrapper.find('.rc-select-selection-search-input').simulate('change', { target: { value: '1' } }); expect(handleSearch).toHaveBeenCalledTimes(1); // Not fire onSearch when value selected @@ -594,9 +594,9 @@ describe('Select.Basic', () => { expect(handleSearch).toHaveBeenCalledTimes(1); // Should trigger onBlur - wrapper.find('input').simulate('change', { target: { value: '3' } }); + wrapper.find('.rc-select-selection-search-input').simulate('change', { target: { value: '3' } }); expect(handleSearch).toHaveBeenCalledTimes(2); - wrapper.find('input').simulate('blur'); + wrapper.find('.rc-select-selection-search-input').simulate('blur'); jest.runAllTimers(); expect(handleSearch).toHaveBeenCalledTimes(3); @@ -635,7 +635,7 @@ describe('Select.Basic', () => { , ); - wrapper.find('input').simulate('focus'); + wrapper.find('.rc-select-selection-search-input').simulate('focus'); jest.runAllTimers(); }); @@ -666,14 +666,14 @@ describe('Select.Basic', () => { , ); - const focusSpy = jest.spyOn(wrapper.find('input').instance(), 'focus'); + const focusSpy = jest.spyOn(wrapper.find('.rc-select-selection-search-input').instance(), 'focus'); wrapper.find('.rc-select-selector').simulate('mousedown'); wrapper.find('.rc-select-selector').simulate('click'); expect(focusSpy).toHaveBeenCalled(); // We should mock trigger focus event since it not work in jsdom - wrapper.find('input').simulate('focus'); + wrapper.find('.rc-select-selection-search-input').simulate('focus'); jest.runAllTimers(); }); @@ -697,7 +697,7 @@ describe('Select.Basic', () => { , ); - const inputSpy = jest.spyOn(selectWrapper.find('input').instance(), 'focus' as any); + const inputSpy = jest.spyOn(selectWrapper.find('.rc-select-selection-search-input').instance(), 'focus' as any); selectWrapper.find('.rc-select-selection-placeholder').simulate('mousedown'); selectWrapper.find('.rc-select-selection-placeholder').simulate('click'); expect(inputSpy).toHaveBeenCalled(); @@ -725,9 +725,9 @@ describe('Select.Basic', () => { , ); - wrapper.find('input').simulate('focus'); - wrapper.find('input').simulate('change', { target: { value: '1' } }); - wrapper.find('input').simulate('blur'); + wrapper.find('.rc-select-selection-search-input').simulate('focus'); + wrapper.find('.rc-select-selection-search-input').simulate('change', { target: { value: '1' } }); + wrapper.find('.rc-select-selection-search-input').simulate('blur'); jest.runAllTimers(); }); @@ -753,7 +753,7 @@ describe('Select.Basic', () => { , ); toggleOpen(wrapper); - wrapper.find('input').simulate('blur'); + wrapper.find('.rc-select-selection-search-input').simulate('blur'); jest.runAllTimers(); wrapper.update(); expectOpen(wrapper, false); @@ -770,8 +770,8 @@ describe('Select.Basic', () => { , ); jest.useFakeTimers(); - wrapper.find('input').simulate('focus'); - wrapper.find('input').simulate('blur'); + wrapper.find('.rc-select-selection-search-input').simulate('focus'); + wrapper.find('.rc-select-selection-search-input').simulate('blur'); jest.runAllTimers(); expect(onFocus).not.toHaveBeenCalled(); expect(onBlur).not.toHaveBeenCalled(); @@ -781,7 +781,7 @@ describe('Select.Basic', () => { [KeyCode.ENTER, KeyCode.DOWN].forEach((keyCode) => { it('open on key press', () => { const wrapper = mount(, ); - expect(wrapper.find('input').prop('type')).toEqual('email'); + expect(wrapper.find('.rc-select-selection-search-input').prop('type')).toEqual('email'); }); }); @@ -1047,7 +1047,7 @@ describe('Select.Basic', () => { , ); - wrapper.find('input').simulate('change', { target: { value: '1' } }); + wrapper.find('.rc-select-selection-search-input').simulate('change', { target: { value: '1' } }); expect(wrapper.find('List').props().data).toHaveLength(3); }); @@ -1073,7 +1073,7 @@ describe('Select.Basic', () => { , ); - wrapper.find('input').simulate('change', { target: { value: '3' } }); + wrapper.find('.rc-select-selection-search-input').simulate('change', { target: { value: '3' } }); expect(wrapper.find('.rc-select-item')).toHaveLength(0); expect(wrapper.find('.rc-select-item-empty').text()).toEqual('Not Found'); }); @@ -1085,7 +1085,7 @@ describe('Select.Basic', () => { , ); - expect(wrapper.find('input').prop('type')).toBe('search'); + expect(wrapper.find('.rc-select-selection-search-input').prop('type')).toBe('search'); }); it('warns on invalid children', () => { @@ -1161,16 +1161,16 @@ describe('Select.Basic', () => { , ); - wrapper.find('input').simulate('keyDown', { which: KeyCode.DOWN }); - wrapper.find('input').simulate('keyDown', { which: KeyCode.DOWN }); + wrapper.find('.rc-select-selection-search-input').simulate('keyDown', { which: KeyCode.DOWN }); + wrapper.find('.rc-select-selection-search-input').simulate('keyDown', { which: KeyCode.DOWN }); - expect(wrapper.find('input').props().value).toEqual('2'); + expect(wrapper.find('.rc-select-selection-search-input').props().value).toEqual('2'); expect(handleChange).not.toHaveBeenCalled(); expect(handleSelect).not.toHaveBeenCalled(); - wrapper.find('input').simulate('keyDown', { which: KeyCode.ENTER }); + wrapper.find('.rc-select-selection-search-input').simulate('keyDown', { which: KeyCode.ENTER }); - expect(wrapper.find('input').props().value).toEqual('2'); + expect(wrapper.find('.rc-select-selection-search-input').props().value).toEqual('2'); expect(handleChange).toHaveBeenCalledWith('2', expect.anything()); expect(handleSelect).toHaveBeenCalledWith('2', expect.anything()); @@ -1204,7 +1204,7 @@ describe('Select.Basic', () => { , ); - wrapper.find('input').simulate('change', { target: { value: '1' } }); + wrapper.find('.rc-select-selection-search-input').simulate('change', { target: { value: '1' } }); expect(wrapper.find('List').props().data.length).toEqual(1); }); }); @@ -1261,7 +1261,7 @@ describe('Select.Basic', () => { jest.runAllTimers(); - expect(container.querySelector('input')).toBe(document.activeElement); + expect(container.querySelector('.rc-select-selection-search-input')).toBe(document.activeElement); jest.useRealTimers(); }); @@ -1287,7 +1287,7 @@ describe('Select.Basic', () => { , ); - wrapper.find('input').simulate('change', { target: { value: 'b' } }); + wrapper.find('.rc-select-selection-search-input').simulate('change', { target: { value: 'b' } }); expect(wrapper.find('List').props().data).toHaveLength(1); expect(wrapper.find('div.rc-select-item-option-content').text()).toBe('ABC'); }); @@ -1319,18 +1319,18 @@ describe('Select.Basic', () => { , ); - wrapper.find('input').simulate('change', { target: { value: 'b' } }); - expect(wrapper.find('input').props().value).toBe('b'); + wrapper.find('.rc-select-selection-search-input').simulate('change', { target: { value: 'b' } }); + expect(wrapper.find('.rc-select-selection-search-input').props().value).toBe('b'); expect(wrapper.find('List').props().data).toHaveLength(1); expect(wrapper.find('div.rc-select-item-option-content').text()).toBe('Burns Bay Road'); - wrapper.find('input').simulate('change', { target: { value: 'c' } }); - expect(wrapper.find('input').props().value).toBe('c'); + wrapper.find('.rc-select-selection-search-input').simulate('change', { target: { value: 'c' } }); + expect(wrapper.find('.rc-select-selection-search-input').props().value).toBe('c'); expect(wrapper.find('.rc-select-item')).toHaveLength(0); expect(wrapper.find('.rc-select-item-empty').text()).toEqual('Not Found'); - wrapper.find('input').simulate('keyDown', { keyCode: KeyCode.ENTER }); - expect(wrapper.find('input').props().value).toBe('c'); + wrapper.find('.rc-select-selection-search-input').simulate('keyDown', { keyCode: KeyCode.ENTER }); + expect(wrapper.find('.rc-select-selection-search-input').props().value).toBe('c'); expect(handleSelect).not.toHaveBeenCalled(); }); @@ -1470,7 +1470,7 @@ describe('Select.Basic', () => { for (let i = 0; i < 10; i += 1) { onSelect.mockReset(); - wrapper.find('input').simulate('keyDown', { which: KeyCode.ENTER }); + wrapper.find('.rc-select-selection-search-input').simulate('keyDown', { which: KeyCode.ENTER }); expect(onSelect).toHaveBeenCalledWith('1', expect.anything()); } }); @@ -1524,11 +1524,11 @@ describe('Select.Basic', () => { const onKeyUp = jest.fn(); const wrapper = mount(, ); - wrapper.find('input').simulate('change', { target: { value: 'l' } }); + wrapper.find('.rc-select-selection-search-input').simulate('change', { target: { value: 'l' } }); expect(wrapper.find('List').props().data).toHaveLength(1); expect(wrapper.find('div.rc-select-item-option-content').text()).toBe('Light'); @@ -1710,7 +1710,7 @@ describe('Select.Basic', () => { , ); - wrapper.find('input').simulate('change', 'Z'); + wrapper.find('.rc-select-selection-search-input').simulate('change', 'Z'); expect(wrapper.find('List').props().data).toHaveLength(1); }); @@ -1924,7 +1924,7 @@ describe('Select.Basic', () => { />, ); - wrapper.find('input').simulate('change', { target: { value: 'i' } }); + wrapper.find('.rc-select-selection-search-input').simulate('change', { target: { value: 'i' } }); expect(wrapper.find('.rc-select-item-option-content').first().text()).toBe('Communicated'); }); @@ -2196,4 +2196,88 @@ describe('Select.Basic', () => { expect(element[0]).not.toHaveClass('rc-select-item-option-disabled'); expect(element[1]).toHaveClass('rc-select-item-option-disabled'); }); + + it('should render nativeInputProps when combobox', () => { + const { container } = testingRender( + , + ); + + expect(container.querySelector('input.rc-select-native-input').getAttribute('id')).toEqual('test'); + expect(container.querySelector('input.rc-select-native-input').getAttribute('name')).toEqual('test'); + expect(container.querySelector('input.rc-select-native-input').getAttribute('value')).toEqual('test 1,test 2'); + }) + + it('should render nativeInputProps when tags', () => { + const { container } = testingRender( + ); wrapper - .find('input') + .find('.rc-select-selection-search-input') .simulate('change', { target: { value: 'foo' } }) .simulate('keyDown', { which: KeyCode.ENTER }); @@ -54,7 +54,7 @@ describe('Select.Tags', () => { const wrapper = mount(, ); - wrapper.find('input').simulate('change', { target: { value: '2,3,4' } }); + wrapper.find('.rc-select-selection-search-input').simulate('change', { target: { value: '2,3,4' } }); expect(handleChange).toHaveBeenCalledWith(['2', '3', '4'], expect.anything()); expect(handleSelect).toHaveBeenCalledTimes(3); @@ -82,7 +82,7 @@ describe('Select.Tags', () => { expect(findSelection(wrapper).text()).toEqual('2'); expect(findSelection(wrapper, 1).text()).toEqual('3'); expect(findSelection(wrapper, 2).text()).toEqual('4'); - expect(wrapper.find('input').props().value).toBe(''); + expect(wrapper.find('.rc-select-selection-search-input').props().value).toBe(''); expectOpen(wrapper, false); }); @@ -97,13 +97,13 @@ describe('Select.Tags', () => { ); // composition start - wrapper.find('input').simulate('compositionStart'); - wrapper.find('input').simulate('change', { target: { value: '2,3,4' } }); + wrapper.find('.rc-select-selection-search-input').simulate('compositionStart'); + wrapper.find('.rc-select-selection-search-input').simulate('change', { target: { value: '2,3,4' } }); expect(handleChange).not.toHaveBeenCalled(); handleChange.mockReset(); // composition end - wrapper.find('input').simulate('compositionEnd'); + wrapper.find('.rc-select-selection-search-input').simulate('compositionEnd'); expect(handleChange).toHaveBeenCalledWith(['2', '3', '4'], expect.anything()); expect(handleSelect).toHaveBeenCalledTimes(3); @@ -111,7 +111,7 @@ describe('Select.Tags', () => { expect(findSelection(wrapper).text()).toEqual('2'); expect(findSelection(wrapper, 1).text()).toEqual('3'); expect(findSelection(wrapper, 2).text()).toEqual('4'); - expect(wrapper.find('input').props().value).toBe(''); + expect(wrapper.find('.rc-select-selection-search-input').props().value).toBe(''); expectOpen(wrapper, false); }); @@ -130,17 +130,17 @@ describe('Select.Tags', () => { , ); - wrapper.find('input').simulate('compositionstart'); - wrapper.find('input').simulate('change', { target: { value: 'Star Kirby' } }); - wrapper.find('input').simulate('keydown', { which: KeyCode.ENTER }); + wrapper.find('.rc-select-selection-search-input').simulate('compositionstart'); + wrapper.find('.rc-select-selection-search-input').simulate('change', { target: { value: 'Star Kirby' } }); + wrapper.find('.rc-select-selection-search-input').simulate('keydown', { which: KeyCode.ENTER }); expect(handleChange).not.toHaveBeenCalled(); handleChange.mockReset(); - wrapper.find('input').simulate('compositionend'); - wrapper.find('input').simulate('keydown', { which: KeyCode.ENTER }); + wrapper.find('.rc-select-selection-search-input').simulate('compositionend'); + wrapper.find('.rc-select-selection-search-input').simulate('keydown', { which: KeyCode.ENTER }); expect(handleChange).toHaveBeenCalledWith(['Star Kirby'], expect.anything()); expect(handleSelect).toHaveBeenCalledTimes(1); expect(findSelection(wrapper).text()).toEqual('Star Kirby'); - expect(wrapper.find('input').props().value).toBe(''); + expect(wrapper.find('.rc-select-selection-search-input').props().value).toBe(''); expectOpen(wrapper, false); }); @@ -175,12 +175,12 @@ describe('Select.Tags', () => { , ); - wrapper.find('input').simulate('paste', { + wrapper.find('.rc-select-selection-search-input').simulate('paste', { clipboardData: { getData: () => clipboardText, }, }); - wrapper.find('input').simulate('change', { + wrapper.find('.rc-select-selection-search-input').simulate('change', { target: { value: inputValue }, }); @@ -203,7 +203,7 @@ describe('Select.Tags', () => { it('dropdown keeps order', () => { const wrapper = mount(, ); - wrapper.find('input').simulate('change', { target: { value: 'a' } }); + wrapper.find('.rc-select-selection-search-input').simulate('change', { target: { value: 'a' } }); expect(wrapper.find('List').props().data).toHaveLength(3); - wrapper.find('input').simulate('keyDown', { which: KeyCode.ENTER }); + wrapper.find('.rc-select-selection-search-input').simulate('keyDown', { which: KeyCode.ENTER }); expect(onChange).toHaveBeenCalledWith(['a'], expect.anything()); }); @@ -287,7 +287,7 @@ describe('Select.Tags', () => { }; const wrapper = mount(, ); toggleOpen(wrapper); - wrapper.find('input').simulate('change', { target: { value: 'f' } }); + wrapper.find('.rc-select-selection-search-input').simulate('change', { target: { value: 'f' } }); expect(wrapper.find('List').props().data).toHaveLength(2); - wrapper.find('input').simulate('keyDown', { which: KeyCode.ENTER }); + wrapper.find('.rc-select-selection-search-input').simulate('keyDown', { which: KeyCode.ENTER }); expect(findSelection(wrapper).text()).toEqual('f'); }); }); @@ -455,10 +455,10 @@ describe('Select.Tags', () => { const errSpy = jest.spyOn(console, 'error'); const wrapper = mount(); const preventDefault = jest.fn(); - wrapper.find('input').simulate('keyDown', { + wrapper.find('.rc-select-selection-search-input').simulate('keyDown', { which: KeyCode.ENTER, preventDefault, }); @@ -500,7 +500,7 @@ describe('Select.Tags', () => { ); toggleOpen(wrapper); expect(wrapper.find('.rc-select-item-option').length).toBe(2); - wrapper.find('input').simulate('change', { target: { value: 'US' } }); + wrapper.find('.rc-select-selection-search-input').simulate('change', { target: { value: 'US' } }); expect(wrapper.find('.rc-select-item-option').length).toBe(1); expect(errSpy).not.toHaveBeenCalled(); @@ -517,7 +517,7 @@ describe('Select.Tags', () => { value={['1', '2', '3']} />, ); - const input = container.querySelector('input'); + const input = container.querySelector('.rc-select-selection-search-input'); fireEvent.paste(input, { clipboardData: { getData: () => 'test' }, }); diff --git a/tests/__snapshots__/Combobox.test.tsx.snap b/tests/__snapshots__/Combobox.test.tsx.snap index 43deee073..82fa71beb 100644 --- a/tests/__snapshots__/Combobox.test.tsx.snap +++ b/tests/__snapshots__/Combobox.test.tsx.snap @@ -24,6 +24,14 @@ exports[`Select.Combobox renders controlled correctly 1`] = ` value="" /> + @@ -57,6 +65,14 @@ exports[`Select.Combobox renders correctly 1`] = ` value="" /> + diff --git a/tests/__snapshots__/Multiple.test.tsx.snap b/tests/__snapshots__/Multiple.test.tsx.snap index f17631fab..64fdf33a5 100644 --- a/tests/__snapshots__/Multiple.test.tsx.snap +++ b/tests/__snapshots__/Multiple.test.tsx.snap @@ -43,6 +43,14 @@ exports[`Select.Multiple render not display maxTagPlaceholder if maxTagCount not + @@ -163,6 +171,14 @@ exports[`Select.Multiple render truncates tags by maxTagCount and show maxTagPla + `; @@ -280,6 +296,14 @@ exports[`Select.Multiple render truncates tags by maxTagCount and show maxTagPla + `; @@ -381,6 +405,14 @@ exports[`Select.Multiple render truncates values by maxTagTextLength 1`] = ` + `; diff --git a/tests/__snapshots__/Select.test.tsx.snap b/tests/__snapshots__/Select.test.tsx.snap index 3d5ab05a3..190805bb3 100644 --- a/tests/__snapshots__/Select.test.tsx.snap +++ b/tests/__snapshots__/Select.test.tsx.snap @@ -134,6 +134,14 @@ exports[`Select.Basic no search 1`] = ` value="" /> + + + + + + +
+ @@ -386,6 +402,14 @@ exports[`Select.Tags render truncates tags by maxTagCount and show maxTagPlaceho + `; @@ -500,6 +524,14 @@ exports[`Select.Tags render truncates tags by maxTagCount and show maxTagPlaceho + `; @@ -598,6 +630,14 @@ exports[`Select.Tags render truncates values by maxTagTextLength 1`] = ` + `; diff --git a/tests/__snapshots__/ssr.test.tsx.snap b/tests/__snapshots__/ssr.test.tsx.snap index 41628b240..98f92dea0 100644 --- a/tests/__snapshots__/ssr.test.tsx.snap +++ b/tests/__snapshots__/ssr.test.tsx.snap @@ -1,3 +1,3 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`Select.SSR should work 1`] = `"
"`; +exports[`Select.SSR should work 1`] = `"
"`; diff --git a/tests/focus.test.tsx b/tests/focus.test.tsx index 80b6aaf01..94e0613a1 100644 --- a/tests/focus.test.tsx +++ b/tests/focus.test.tsx @@ -14,7 +14,7 @@ describe('Select.Focus', () => { const wrapper = mount(); - const focusFn = jest.spyOn(wrapper.find('input').instance(), 'focus' as any); + const focusFn = jest.spyOn(wrapper.find('.rc-select-selection-search-input').instance(), 'focus' as any); wrapper.find('.rc-select-selector').simulate('click'); jest.runAllTimers(); diff --git a/tests/shared/allowClearTest.tsx b/tests/shared/allowClearTest.tsx index eb968bf42..85041a00e 100644 --- a/tests/shared/allowClearTest.tsx +++ b/tests/shared/allowClearTest.tsx @@ -40,7 +40,7 @@ export default function allowClearTest(mode: any, value: any) { expect(onChange).toHaveBeenCalledWith(undefined, undefined); } expect(onDeselect).not.toBeCalled(); - expect(wrapper.find('input').props().value).toEqual(''); + expect(wrapper.find('.rc-select-selection-search-input').props().value).toEqual(''); expect(onClear).toHaveBeenCalled(); }); }); diff --git a/tests/shared/blurTest.tsx b/tests/shared/blurTest.tsx index 40e0ac6f7..2e403a5d5 100644 --- a/tests/shared/blurTest.tsx +++ b/tests/shared/blurTest.tsx @@ -33,10 +33,10 @@ export default function blurTest(mode: any) { }); it('clears inputValue', () => { - wrapper.find('input').simulate('change', { target: { value: '1' } }); - wrapper.find('input').simulate('blur'); + wrapper.find('.rc-select-selection-search-input').simulate('change', { target: { value: '1' } }); + wrapper.find('.rc-select-selection-search-input').simulate('blur'); - expect(wrapper.find('input').getDOMNode().value).toBe(''); + expect(wrapper.find('.rc-select-selection-search-input').getDOMNode().value).toBe(''); }); it('blur()', () => { @@ -53,17 +53,17 @@ export default function blurTest(mode: any) { const handleBlur = jest.fn(); wrapper.setProps({ onBlur: handleBlur }); wrapper - .find('input') + .find('.rc-select-selection-search-input') .instance() .focus(); expect(handleBlur).not.toHaveBeenCalled(); - wrapper.find('input').simulate('blur'); + wrapper.find('.rc-select-selection-search-input').simulate('blur'); expect(handleBlur).toHaveBeenCalled(); wrapper.update(); wrapper - .find('input') + .find('.rc-select-selection-search-input') .instance() .blur(); jest.runAllTimers(); diff --git a/tests/shared/inputFilterTest.tsx b/tests/shared/inputFilterTest.tsx index b7affee6f..cdd5a8cb1 100644 --- a/tests/shared/inputFilterTest.tsx +++ b/tests/shared/inputFilterTest.tsx @@ -12,7 +12,7 @@ export default function inputFilterTest(mode: any) { , ); - const input = wrapper.find('input'); + const input = wrapper.find('.rc-select-selection-search-input'); input.simulate('change', { target: { value: '1', @@ -20,12 +20,12 @@ export default function inputFilterTest(mode: any) { }); expect(wrapper.find('.rc-select').hasClass('rc-select-open')).toBeTruthy(); - expect(wrapper.find('input').props().value).toBe('1'); + expect(wrapper.find('.rc-select-selection-search-input').props().value).toBe('1'); wrapper .find('.rc-select-item-option') .first() .simulate('click'); - expect(wrapper.find('input').props().value).toBe(mode === 'single' ? '' : '1'); + expect(wrapper.find('.rc-select-selection-search-input').props().value).toBe(mode === 'single' ? '' : '1'); }); it('should clear input filter after select', () => { @@ -36,7 +36,7 @@ export default function inputFilterTest(mode: any) { , ); - const input = wrapper.find('input'); + const input = wrapper.find('.rc-select-selection-search-input'); input.simulate('change', { target: { value: '1', @@ -44,11 +44,11 @@ export default function inputFilterTest(mode: any) { }); expect(wrapper.find('.rc-select').hasClass('rc-select-open')).toBeTruthy(); - expect(wrapper.find('input').props().value).toBe('1'); + expect(wrapper.find('.rc-select-selection-search-input').props().value).toBe('1'); wrapper .find('.rc-select-item-option') .first() .simulate('click'); - expect(wrapper.find('input').props().value).toBe(''); + expect(wrapper.find('.rc-select-selection-search-input').props().value).toBe(''); }); } diff --git a/tests/shared/keyDownTest.tsx b/tests/shared/keyDownTest.tsx index 57a0f148e..25e43010f 100644 --- a/tests/shared/keyDownTest.tsx +++ b/tests/shared/keyDownTest.tsx @@ -13,7 +13,7 @@ export default function keyDownTest(mode: any) { , ); - wrapper.find('input').simulate('keydown'); + wrapper.find('.rc-select-selection-search-input').simulate('keydown'); expect(onInputKeyDown).toHaveBeenCalled(); }); } diff --git a/tests/shared/removeSelectedTest.tsx b/tests/shared/removeSelectedTest.tsx index b9da6b5f0..dacb43fa8 100644 --- a/tests/shared/removeSelectedTest.tsx +++ b/tests/shared/removeSelectedTest.tsx @@ -82,7 +82,7 @@ export default function removeSelectedTest(mode: any) { , ); - wrapper.find('input').simulate('keyDown', { which: KeyCode.BACKSPACE }); + wrapper.find('.rc-select-selection-search-input').simulate('keyDown', { which: KeyCode.BACKSPACE }); expect(onChange).toHaveBeenCalledWith(['1'], [expect.objectContaining({ value: '1' })]); }); @@ -97,7 +97,7 @@ export default function removeSelectedTest(mode: any) { toggleOpen(wrapper); selectItem(wrapper); - expect(wrapper.find('input').props().value).toBe(''); + expect(wrapper.find('.rc-select-selection-search-input').props().value).toBe(''); expect(onChange).toHaveBeenCalledWith([], []); }); });