fix: missing comps event (#49)

react-component · Sep 27, 2023 · 642379d · 642379d
1 parent 67ebb95
commit 642379d
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 3 deletions.
diff --git a/src/Input.tsx b/src/Input.tsx
@@ -34,6 +34,8 @@ const Input = forwardRef<InputRef, InputProps>((props, ref) => {
     classes,
     classNames,
     styles,
+    onCompositionStart,
+    onCompositionEnd,
     ...rest
   } = props;
 
@@ -114,9 +116,12 @@ const Input = forwardRef<InputRef, InputProps>((props, ref) => {
     triggerChange(e, e.target.value);
   };
 
-  const onCompositionEnd = (e: React.CompositionEvent<HTMLInputElement>) => {
+  const onInternalCompositionEnd = (
+    e: React.CompositionEvent<HTMLInputElement>,
+  ) => {
     compositionRef.current = false;
     triggerChange(e, e.currentTarget.value);
+    onCompositionEnd?.(e);
   };
 
   const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
@@ -189,10 +194,11 @@ const Input = forwardRef<InputRef, InputProps>((props, ref) => {
         ref={inputRef}
         size={htmlSize}
         type={type}
-        onCompositionStart={() => {
+        onCompositionStart={(e) => {
           compositionRef.current = true;
+          onCompositionStart?.(e);
         }}
-        onCompositionEnd={onCompositionEnd}
+        onCompositionEnd={onInternalCompositionEnd}
       />
     );
   };

diff --git a/tests/count.test.tsx b/tests/count.test.tsx
@@ -48,6 +48,9 @@ describe('Input.Count', () => {
   });
 
   it('exceedFormatter', () => {
+    const onCompositionStart = jest.fn();
+    const onCompositionEnd = jest.fn();
+
     const { container } = render(
       <Input
         count={{
@@ -59,6 +62,8 @@ describe('Input.Count', () => {
               .map((seg) => seg.segment)
               .join(''),
         }}
+        onCompositionStart={onCompositionStart}
+        onCompositionEnd={onCompositionEnd}
       />,
     );
 
@@ -70,9 +75,11 @@ describe('Input.Count', () => {
       },
     });
     expect(container.querySelector('input')?.value).toEqual('🔥🔥🔥🔥🔥');
+    expect(onCompositionStart).toHaveBeenCalled();
 
     // Fallback
     fireEvent.compositionEnd(container.querySelector('input')!);
     expect(container.querySelector('input')?.value).toEqual('🔥');
+    expect(onCompositionEnd).toHaveBeenCalled();
   });
 });