diff --git a/src/TextArea.tsx b/src/TextArea.tsx index af2e233..e91a3f9 100644 --- a/src/TextArea.tsx +++ b/src/TextArea.tsx @@ -6,12 +6,13 @@ import useControlledState from '@rc-component/util/lib/hooks/useControlledState' import { clsx } from 'clsx'; import type { ReactNode } from 'react'; import React, { useEffect, useImperativeHandle, useRef } from 'react'; -import ResizableTextArea from './ResizableTextArea'; import type { + ChangeEventInfo, ResizableTextAreaRef, TextAreaProps, TextAreaRef, } from './interface'; +import ResizableTextArea from './ResizableTextArea'; const TextArea = React.forwardRef( ( @@ -105,6 +106,7 @@ const TextArea = React.forwardRef( | React.ChangeEvent | React.CompositionEvent, currentValue: string, + info: ChangeEventInfo, ) => { let cutValue = currentValue; @@ -124,6 +126,8 @@ const TextArea = React.forwardRef( getTextArea().selectionEnd || 0, ]); } + } else if (info.source === 'compositionEnd') { + return; } setValue(cutValue); @@ -142,12 +146,12 @@ const TextArea = React.forwardRef( HTMLTextAreaElement > = (e) => { compositionRef.current = false; - triggerChange(e, e.currentTarget.value); + triggerChange(e, e.currentTarget.value, { source: 'compositionEnd' }); onCompositionEnd?.(e); }; const onInternalChange = (e: React.ChangeEvent) => { - triggerChange(e, e.target.value); + triggerChange(e, e.target.value, { source: 'change' }); }; const handleKeyDown = (e: React.KeyboardEvent) => { diff --git a/src/interface.ts b/src/interface.ts index 476d49a..823a6ef 100644 --- a/src/interface.ts +++ b/src/interface.ts @@ -44,3 +44,7 @@ export type TextAreaRef = { blur: () => void; nativeElement: HTMLElement; }; + +export interface ChangeEventInfo { + source: 'compositionEnd' | 'change'; +}