Fixed #499

primefaces · Jul 18, 2018 · aa38159 · aa38159
1 parent eeb27d1
commit aa38159
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 46 deletions.
diff --git a/src/components/inputtext/InputText.js b/src/components/inputtext/InputText.js
@@ -35,41 +35,21 @@ export class InputText extends Component {
         }
     }
 
-    onInput(e) {
+    onInput(event) {
         let validatePattern = true;
         if (this.props.keyfilter && this.props.validateOnly) {
-            validatePattern = KeyFilter.validate(e, this.props.keyfilter);
+            validatePattern = KeyFilter.validate(event, this.props.keyfilter);
         }
 
-        if(this.props.onInput) {
-            this.props.onInput(e, validatePattern);
-        }
-
-        this.updateFilledState(e.target.value);
-    }
-
-    updateFilledState(val) {
-        if(val && val.length)
-            this.inputEl.classList.add('ui-state-filled');
-        else
-            this.inputEl.classList.remove('ui-state-filled');
-    }
-
-    componentDidMount() {
-        let _value =  this.props.value || this.props.defaultValue;
-
-        this.updateFilledState(_value);
-    }
-
-    componentDidUpdate(prevProps, prevState, snapshot){
-        if (prevProps.value !== this.props.value) {
-            this.updateFilledState(this.props.value);
+        if (this.props.onInput) {
+            this.props.onInput(event, validatePattern);
         }
     }
 
     render() {
-        let className = classNames('ui-inputtext ui-state-default ui-corner-all ui-widget', this.props.className, {
-            'ui-state-disabled': this.props.disabled
+        const className = classNames('ui-inputtext ui-state-default ui-corner-all ui-widget', this.props.className, {
+            'ui-state-disabled': this.props.disabled,
+            'ui-state-filled': this.props.value && this.props.value.length
         });
 
         let inputProps = Object.assign({}, this.props);

diff --git a/src/showcase/inputtext/InputTextDemo.js b/src/showcase/inputtext/InputTextDemo.js
@@ -9,7 +9,9 @@ export class InputTextDemo extends Component {
     constructor() {
         super();
         this.state = {
-            value: null
+            value1: '',
+            value2: '',
+            value3: ''
         };
     }
 
@@ -29,17 +31,17 @@ export class InputTextDemo extends Component {
 
                 <div className="content-section implementation">
                     <h3 className="first">Basic</h3>
-                    <InputText onChange={(e) => this.setState({value: e.target.value})}/>
-                    <span style={{marginLeft:'.5em'}}>{this.state.value}</span>
+                    <InputText value={this.state.value1} onChange={(e) => this.setState({value1: e.target.value})} />
+                    <span style={{marginLeft:'.5em'}}>{this.state.value1}</span>
 
                     <h3>Floating Label</h3>
                     <span className="ui-float-label">
-                        <InputText id="float-input" type="text" size="30" />
+                        <InputText id="float-input" type="text" size="30" value={this.state.value2} onChange={(e) => this.setState({value2: e.target.value})} />
                         <label htmlFor="float-input">Username</label>
                     </span>
 
-                    <h3>KeyFilter</h3>
-                    <InputText type="text" keyfilter="pint" />
+                    <h3>KeyFilter - Positive Number Only</h3>
+                    <InputText type="text" keyfilter="pint" value={this.state.value3} onChange={(e) => this.setState({value3: e.target.value})} />
                 </div>
 
                 <InputTextDoc />
@@ -89,7 +91,7 @@ import {InputText} from 'primereact/inputtext';
                         </CodeHighlight>
 
                         <h3>KeyFilter</h3>
-                        <p>InputText has built-in key filtering support to block certain keys, refer to <Link to="/keyfilter">keyfilte</Link> page for more information.</p>
+                        <p>InputText has built-in key filtering support to block certain keys, refer to <Link to="/keyfilter">keyfilter</Link> page for more information.</p>
 
                         <h3>Properties</h3>
                         <p>InputText passes any valid attribute to the underlying input element. Extended properties are as follows;</p>
@@ -179,18 +181,20 @@ export class InputTextDemo extends Component {
                 </div>
 
                 <div className="content-section implementation">
-                    <h3 className="first">Basic</h3>
-                    <InputText onChange={(e) => this.setState({value: e.target.value})}/>
-                    <span style={{marginLeft:'.5em'}}>{this.state.value}</span>
-
-                    <h3>Floating Label</h3>
-                    <span className="ui-float-label">
-                        <InputText id="float-input" type="text" size="30" />
-                        <label htmlFor="float-input">Username</label>
-                    </span>
-
-                    <h3>KeyFilter</h3>
-                    <InputText type="text" keyfilter="pint" />
+                    <div className="content-section implementation">
+                        <h3 className="first">Basic</h3>
+                        <InputText value={this.state.value1} onChange={(e) => this.setState({value1: e.target.value})} />
+                        <span style={{marginLeft:'.5em'}}>{this.state.value1}</span>
+
+                        <h3>Floating Label</h3>
+                        <span className="ui-float-label">
+                            <InputText id="float-input" type="text" size="30" value={this.state.value2} onChange={(e) => this.setState({value2: e.target.value})} />
+                            <label htmlFor="float-input">Username</label>
+                        </span>
+
+                        <h3>KeyFilter - Positive Number Only</h3>
+                        <InputText type="text" keyfilter="pint" value={this.state.value3} onChange={(e) => this.setState({value3: e.target.value})} />
+                    </div>
                 </div>
             </div>
         )