Floating label for TextInput with number value fails

[Kh0di]

I'm submitting a ...

[X] bug report
[ ] feature request
[ ] support request

Current behavior
If the input has a value of type number the floating label acts as if the input didn't have any value to begin with and the label is lowered inside of the input, therefore overlapping with the actual value of the input.

Expected behavior
Label should float above the input like it does when the value is of type string.

Example

import * as React from 'react';
import { InputText } from 'primereact/inputtext';
import 'primereact/resources/primereact.min.css';
 
 
export class Input extends React.Component {
    constructor(props) {
        super(props);
        this.state ={
            value: 3
        };
    }
 
    render() {
        return (  
            <span className="p-float-label">
                <InputText
                    id="input"
                    type="number"
                    value={this.state.value}
                    onChange={e => this.setState({ value: e.target.value })}
                />
                <label htmlFor="input">label inside input</label>
            </span>
        );
    }
}

Screenshot:

Please tell us about your environment:

• React version:
  react: ^16.4.1

• PrimeReact version:
  primereact": ^2.0.0-beta.6

• Theme:
  ultima-react-2.0.0.beta.2

• Browsers:
  all

• Language:
  TypeScript 3.0.3

[cagataycivici]

Replicated

[urnauzao]

Hi...
I solved this same problem in my system.

You can change:
{e => this.setState({ value: e.target.value })}
To:
{e => this.setState({...this.state, value: e.target.value })}

And lastly, you must change:
<InputText ... value={this.state.value} ... />
To:
<InputText ... defaultValue={this.state.value} ... />

Hands on!