fix: Compositing should trigger again when ended (#583)

react-component · Dec 28, 2020 · ddbcd12 · ddbcd12 · vercel · Dec 28, 2020
1 parent b3eb0a9
commit ddbcd12
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 6 deletions.
diff --git 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<RefSelectorProps, SelectorProps> =
     compositionStatusRef.current = true;
   };
 
-  const onInputCompositionEnd = () => {
+  const onInputCompositionEnd: React.CompositionEventHandler<HTMLInputElement> = e => {
     compositionStatusRef.current = false;
+    triggerOnSearch((e.target as HTMLInputElement).value);
   };
 
   const onInputChange: React.ChangeEventHandler<HTMLInputElement> = event => {

diff --git 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', () => {
       </Select>,
     );
 
-    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');