From 642379db32290b5dc06f4656ec0bee22b084483b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E7=88=B1=E5=90=83=E7=99=BD=E8=90=9D?=
 =?UTF-8?q?=E5=8D=9C?= <smith3816@gmail.com>
Date: Wed, 27 Sep 2023 17:07:36 +0800
Subject: [PATCH] fix: missing comps event (#49)

---
 src/Input.tsx        | 12 +++++++++---
 tests/count.test.tsx |  7 +++++++
 2 files changed, 16 insertions(+), 3 deletions(-)

diff --git a/src/Input.tsx b/src/Input.tsx
index 7351f4e..4645995 100644
--- 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
index 2f3ca0e..8ed2edf 100644
--- 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();
   });
 });