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((props, ref) => { classes, classNames, styles, + onCompositionStart, + onCompositionEnd, ...rest } = props; @@ -114,9 +116,12 @@ const Input = forwardRef((props, ref) => { triggerChange(e, e.target.value); }; - const onCompositionEnd = (e: React.CompositionEvent) => { + const onInternalCompositionEnd = ( + e: React.CompositionEvent, + ) => { compositionRef.current = false; triggerChange(e, e.currentTarget.value); + onCompositionEnd?.(e); }; const handleKeyDown = (e: React.KeyboardEvent) => { @@ -189,10 +194,11 @@ const Input = forwardRef((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( { .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(); }); });