diff --git a/src/components/formFields/longtext/commontext.tsx b/src/components/formFields/longtext/commontext.tsx
index d57d2a2992a240f06397e5fafa891bde3ae04f71..7d2c6199a086f18dc8e0c437da2e45ce156d4365 100644
--- a/src/components/formFields/longtext/commontext.tsx
+++ b/src/components/formFields/longtext/commontext.tsx
@@ -8,19 +8,53 @@ type Props = {
   disabled?: boolean
   placeholder?: string
   onChange: (value: string) => Promise<void>
-};
-
+}
+type State = {
+  wait: boolean
+  flag: boolean
+  input: string
+  firstComposition: boolean
+}
 export default class TextComponent extends PureComponent<Props, {}> {
   isOnComposition = false
-
+  selectionStart: number | null = null
+  selectionEnd: number | null = null
+  timer: NodeJS.Timeout | null = null
+  ref: any
   state = {
+    wait: false,
     flag: false,
-    input: ''
+    input: this.props.value || '',
+    firstComposition: true
+  }
+  componentDidUpdate (prevProps: Props, prevState: State) {
+    if (prevProps.value != this.props.value && prevState.wait === false) {
+      this.ref.resizableTextArea.textArea.selectionStart = this.selectionStart
+      this.ref.resizableTextArea.textArea.selectionEnd = this.selectionEnd
+    }
   }
-
   handleComposition = (e: any) => {
-    const { flag } = this.state
-    if (e.type === 'compositionend') {
+    const { flag, firstComposition } = this.state
+    if (firstComposition) {
+      e.target.value = this.props.value
+      this.setState({
+        firstComposition: false
+      })
+    }
+
+    if ('compositionstart' === e.type) {
+      if (e.target.value && (e.target.value != 'undefined')) {
+        this.setState({
+          input: e.target.value || ''
+        })
+      }else{
+        this.setState({
+          input: ''
+        })
+      }
+    }
+
+    if ('compositionend' === e.type) {
       this.isOnComposition = false
       this.handleChange(e)
     } else {
@@ -33,38 +67,51 @@ export default class TextComponent extends PureComponent<Props, {}> {
 
   setFlag = (flag: boolean) => {
     this.setState({
-      flag: this.isOnComposition
+      flag: flag
     })
   }
 
   setInput = (value: string) => {
     this.setState({
-      input: value
+      input: value,
+      wait: true
     })
   }
-
-  handleChange = (e: any) => {
+  
+  handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
     const { onChange } = this.props
+    const value = e.target.value
+    this.selectionStart = e.target.selectionStart
+    this.selectionEnd = e.target.selectionEnd
     this.setInput(e.target.value)
     if (this.isOnComposition) return
-    onChange && onChange(e.target.value)
+    if (this.timer !== null) clearTimeout(this.timer)
+    this.timer = setTimeout(() => {
+      this.setState({
+        wait: false
+      })
+    
+    onChange && onChange(value)
+    }, 100)
   }
 
   render () {
     const { value, readonly, disabled, placeholder } = this.props
-    const { flag, input } = this.state
+    const {  wait, flag, input } = this.state
 
     const Component = TextArea
 
     return <Component
-      readOnly={readonly}
+      ref={(e)=>{ this.ref= e }}readOnly={readonly}
       disabled={disabled}
       placeholder={placeholder}
-      value={!flag ? value : input}
+      value={!flag && !wait ? value : input}
       onCompositionStart={this.handleComposition}
       onCompositionUpdate={this.handleComposition}
       onCompositionEnd={this.handleComposition}
-      onChange={this.handleChange}
+      onChange={(e) => {
+        this.handleChange(e)
+      }}
     />
   }
 }
diff --git a/src/components/formFields/text/commontext.tsx b/src/components/formFields/text/commontext.tsx
index a3e1f57c1b8f2f177d2565c3404d93d95e5e55a1..be4f16e11cca267427541a9554a63319d1386024 100644
--- a/src/components/formFields/text/commontext.tsx
+++ b/src/components/formFields/text/commontext.tsx
@@ -8,24 +8,36 @@ type Props = {
   placeholder?: string
   onChange: (value: string) => Promise<void>
 };
-
+type State = {
+  wait: boolean
+  flag:  boolean
+  input: string
+  firstComposition: boolean
+}
 export default class TextComponent extends PureComponent<Props, {}> {
   isOnComposition = false
   selectionStart: number | null = null
   selectionEnd: number | null = null
-
+  timer: NodeJS.Timeout | null = null
+  ref: any
   state = {
+    wait: false,
     flag: false,
     input: this.props.value || '',
-    firstCompositon: true
+    firstComposition: true
+  }
+  componentDidUpdate (prevProps: Props, prevState: State) {
+    if (prevProps.value != this.props.value && prevState.wait === false) {
+      this.ref.input.selectionStart = this.selectionStart
+      this.ref.input.selectionEnd = this.selectionEnd
+    }
   }
-
   handleComposition = (e: any) => {
-    const { flag, firstCompositon } = this.state
-    if (firstCompositon) {
+    const { flag, firstComposition } = this.state
+    if (firstComposition) {
       e.target.value = this.props.value
       this.setState({
-        firstCompositon: false
+        firstComposition: false
       })
     }
 
@@ -47,6 +59,9 @@ export default class TextComponent extends PureComponent<Props, {}> {
     } else {
       this.isOnComposition = true
     }
+    if (flag !== this.isOnComposition) {
+      this.setFlag(this.isOnComposition)
+    }
   }
 
   setFlag = (flag: boolean) => {
@@ -57,42 +72,44 @@ export default class TextComponent extends PureComponent<Props, {}> {
 
   setInput = (value: string) => {
     this.setState({
-      input: value
+      input: value,
+      wait: true
     })
   }
   handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    this.setFlag(true)
+    const { onChange } = this.props
+    const value = e.target.value
+    this.selectionStart = e.target.selectionStart
+    this.selectionEnd = e.target.selectionEnd
     this.setInput(e.target.value)
+    if (this.isOnComposition) return
+    if (this.timer !== null) clearTimeout(this.timer)
+    this.timer = setTimeout(() => {
+      this.setState({
+        wait: false
+      })
+    
+    onChange && onChange(value)
+    }, 100)
   }
 
   render() {
     const { value, readonly, disabled, placeholder } = this.props
-    const { flag, input } = this.state
+    const { wait, flag, input } = this.state
 
     const Component = Input
 
     return <Component
+      ref={(e)=>{ this.ref= e }}
       readOnly={readonly}
       disabled={disabled}
       placeholder={placeholder}
-      value={!flag ? value : input}
+      value={!flag && !wait ? value : input}
       onCompositionStart={this.handleComposition}
       onCompositionUpdate={this.handleComposition}
       onCompositionEnd={this.handleComposition}
       onChange={(e) => {
-        this.selectionStart = e.target.selectionStart
-        this.selectionEnd = e.target.selectionEnd
-        const eTaget = e.target
         this.handleChange(e)
-        setTimeout(() => {
-          eTaget.selectionStart = this.selectionStart
-          eTaget.selectionEnd = this.selectionEnd
-        })
-      }}
-      onBlur={(e) => {
-        const { onChange } = this.props
-        onChange && onChange(e.target.value)
-        this.setFlag(false)
       }}
     />
   }