test: composition events (#511)

Author: 07akioni

src/Selector/MultipleSelector.tsx

@@ -60,8 +60,8 @@ const SelectSelector: React.FC<SelectorProps> = props => {
     onInputPaste,
     onInputKeyDown,
     onInputMouseDown,
-    onCompositionStart,
-    onCompositionEnd,
+    onInputCompositionStart,
+    onInputCompositionEnd,
   } = props;
 
   const [motionAppear, setMotionAppear] = React.useState(false);
@@ -198,8 +198,8 @@ const SelectSelector: React.FC<SelectorProps> = props => {
           onMouseDown={onInputMouseDown}
           onChange={onInputChange}
           onPaste={onInputPaste}
-          onCompositionStart={onCompositionStart}
-          onCompositionEnd={onCompositionEnd}
+          onCompositionStart={onInputCompositionStart}
+          onCompositionEnd={onInputCompositionEnd}
           tabIndex={tabIndex}
           attrs={pickAttrs(props, true)}
         />

src/Selector/SingleSelector.tsx

@@ -33,8 +33,8 @@ const SingleSelector: React.FC<SelectorProps> = props => {
     onInputMouseDown,
     onInputChange,
     onInputPaste,
-    onCompositionStart,
-    onCompositionEnd,
+    onInputCompositionStart,
+    onInputCompositionEnd,
   } = props;
 
   const combobox = mode === 'combobox';
@@ -69,8 +69,8 @@ const SingleSelector: React.FC<SelectorProps> = props => {
           onMouseDown={onInputMouseDown}
           onChange={onInputChange}
           onPaste={onInputPaste}
-          onCompositionStart={onCompositionStart}
-          onCompositionEnd={onCompositionEnd}
+          onCompositionStart={onInputCompositionStart}
+          onCompositionEnd={onInputCompositionEnd}
           tabIndex={tabIndex}
           attrs={pickAttrs(props, true)}
         />

src/Selector/index.tsx

@@ -37,8 +37,8 @@ export interface InnerSelectorProps {
   onInputMouseDown: React.MouseEventHandler<HTMLInputElement | HTMLTextAreaElement>;
   onInputChange: React.ChangeEventHandler<HTMLInputElement | HTMLTextAreaElement>;
   onInputPaste: React.ClipboardEventHandler<HTMLInputElement | HTMLTextAreaElement>;
-  onCompositionStart: React.CompositionEventHandler<HTMLInputElement | HTMLTextAreaElement>;
-  onCompositionEnd: React.CompositionEventHandler<HTMLInputElement | HTMLTextAreaElement>;
+  onInputCompositionStart: React.CompositionEventHandler<HTMLInputElement | HTMLTextAreaElement>;
+  onInputCompositionEnd: React.CompositionEventHandler<HTMLInputElement | HTMLTextAreaElement>;
 }
 
 export interface RefSelectorProps {
@@ -152,11 +152,11 @@ const Selector: React.RefForwardingComponent<RefSelectorProps, SelectorProps> =
     }
   };
 
-  const onCompositionStart = () => {
+  const onInputCompositionStart = () => {
     compositionStatusRef.current = true;
   };
 
-  const onCompositionEnd = () => {
+  const onInputCompositionEnd = () => {
     compositionStatusRef.current = false;
   };
 
@@ -215,8 +215,8 @@ const Selector: React.RefForwardingComponent<RefSelectorProps, SelectorProps> =
     onInputMouseDown: onInternalInputMouseDown,
     onInputChange,
     onInputPaste,
-    onCompositionStart,
-    onCompositionEnd,
+    onInputCompositionStart,
+    onInputCompositionEnd,
   };
 
   const selectNode = multiple ? (

tests/Select.test.tsx

@@ -779,6 +779,8 @@ describe('Select.Basic', () => {
     const onKeyDown = jest.fn();
     const onChange = jest.fn();
     const onMouseDown = jest.fn();
+    const onCompositionStart = jest.fn();
+    const onCompositionEnd = jest.fn();
     const textareaRef = jest.fn();
     const mouseDownPreventDefault = jest.fn();
     const wrapper = mount(
@@ -789,6 +791,8 @@ describe('Select.Basic', () => {
             onKeyDown={onKeyDown}
             onChange={onChange}
             onMouseDown={onMouseDown}
+            onCompositionStart={onCompositionStart}
+            onCompositionEnd={onCompositionEnd}
             ref={textareaRef}
           />
         )}
@@ -805,7 +809,9 @@ describe('Select.Basic', () => {
       .find('textarea')
       .simulate('mouseDown', { preventDefault: mouseDownPreventDefault })
       .simulate('keyDown', { which: KeyCode.NUM_ONE })
-      .simulate('change', { value: '1' });
+      .simulate('change', { value: '1' })
+      .simulate('compositionStart')
+      .simulate('compositionEnd');
 
     selectItem(wrapper);
     expect(wrapper.find('textarea').props().value).toEqual('1');
@@ -814,6 +820,8 @@ describe('Select.Basic', () => {
     expect(onChange).toHaveBeenCalled();
     expect(onMouseDown).toHaveBeenCalled();
     expect(textareaRef).toHaveBeenCalled();
+    expect(onCompositionStart).toHaveBeenCalled();
+    expect(onCompositionEnd).toHaveBeenCalled();
   });
 
   describe('propTypes', () => {