input performance improved

Detaysoft · Jul 20, 2020 · 8a4c7f3 · 8a4c7f3
1 parent f95508b
commit 8a4c7f3
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 18 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-chat-elements",
-  "version": "10.9.2",
+  "version": "10.9.3",
   "description": "Reactjs chat components",
   "author": "Avare Kodcu <[email protected]>",
   "main": "dist/main.js",

diff --git a/src/Input/Input.js b/src/Input/Input.js
@@ -4,35 +4,33 @@ import './Input.css';
 const classNames = require('classnames');
 
 export class Input extends Component {
-    constructor(props) {
-        super(props);
-
-        this.state = {
-            value: this.props.defaultValue,
-        };
-    }
-
     onChange(e) {
         if (this.props.maxlength && (e.target.value || '').length > this.props.maxlength) {
             if (this.props.onMaxLengthExceed instanceof Function)
                 this.props.onMaxLengthExceed();
+
+            this.input.value = (e.target.value || '').substring(0, this.props.maxlength);
             return;
         }
 
-        this.setState({
-            value: e.target.value
-        });
         if (this.props.onChange instanceof Function)
             this.props.onChange(e);
 
         if (this.props.multiline === true) {
             if (this.props.autoHeight === true) {
-                e.target.style.height = this.props.minHeight + 'px';
+                if (e.target.style.height !== this.props.minHeight + 'px') {
+                    e.target.style.height = this.props.minHeight + 'px';
+                }
 
+                let height;
                 if (e.target.scrollHeight <= this.props.maxHeight)
-                    e.target.style.height = e.target.scrollHeight + 'px';
+                    height = e.target.scrollHeight + 'px';
                 else
-                    e.target.style.height = this.props.maxHeight + 'px';
+                    height = this.props.maxHeight + 'px';
+
+                if (e.target.style.height !== height) {
+                    e.target.style.height = height;
+                }
             }
         }
     }
@@ -42,7 +40,11 @@ export class Input extends Component {
             FAKE_EVENT: true,
             target: this.input,
         };
-        this.input.value = '';
+
+        if (this.input.value) {
+            this.input.value = '';
+        }
+
         this.onChange(event);
     }
 
@@ -71,7 +73,7 @@ export class Input extends Component {
                         type={this.props.type}
                         className={classNames('rce-input')}
                         placeholder={this.props.placeholder}
-                        value={this.state.value}
+                        defaultValue={this.props.defaultValue}
                         style={this.props.inputStyle}
                         onChange={this.onChange.bind(this)}
                         onCopy={this.props.onCopy}
@@ -95,7 +97,7 @@ export class Input extends Component {
                         type={this.props.type}
                         className={classNames('rce-input', 'rce-input-textarea')}
                         placeholder={this.props.placeholder}
-                        value={this.state.value}
+                        defaultValue={this.props.defaultValue}
                         style={this.props.inputStyle}
                         onChange={this.onChange.bind(this)}
                         onCopy={this.props.onCopy}