diff --git a/src/Selector/index.tsx b/src/Selector/index.tsx index d6ac163c7..a9c581219 100644 --- a/src/Selector/index.tsx +++ b/src/Selector/index.tsx @@ -47,7 +47,7 @@ export interface InnerSelectorProps { export interface RefSelectorProps { focus: () => void; blur: () => void; - scrollTo?: ScrollTo, + scrollTo?: ScrollTo; } export interface SelectorProps { @@ -172,8 +172,9 @@ const Selector: React.RefForwardingComponent = compositionStatusRef.current = true; }; - const onInputCompositionEnd = () => { + const onInputCompositionEnd: React.CompositionEventHandler = e => { compositionStatusRef.current = false; + triggerOnSearch((e.target as HTMLInputElement).value); }; const onInputChange: React.ChangeEventHandler = event => { diff --git a/tests/Tags.test.tsx b/tests/Tags.test.tsx index 0983303bf..e443c77a6 100644 --- a/tests/Tags.test.tsx +++ b/tests/Tags.test.tsx @@ -86,7 +86,7 @@ describe('Select.Tags', () => { expectOpen(wrapper, false); }); - it("shounld't separate words when compositing", () => { + it('should not separate words when compositing but trigger after composition end', () => { const handleChange = jest.fn(); const handleSelect = jest.fn(); const wrapper = mount( @@ -96,13 +96,16 @@ describe('Select.Tags', () => { , ); - wrapper.find('input').simulate('compositionstart'); + // composition start + wrapper.find('input').simulate('compositionStart'); wrapper.find('input').simulate('change', { target: { value: '2,3,4' } }); expect(handleChange).not.toHaveBeenCalled(); handleChange.mockReset(); - wrapper.find('input').simulate('compositionend'); - wrapper.find('input').simulate('change', { target: { value: '2,3,4' } }); + + // composition end + wrapper.find('input').simulate('compositionEnd'); expect(handleChange).toHaveBeenCalledWith(['2', '3', '4'], expect.anything()); + expect(handleSelect).toHaveBeenCalledTimes(3); expect(handleSelect).toHaveBeenLastCalledWith('4', expect.anything()); expect(findSelection(wrapper).text()).toEqual('2');