On page load, input has type = "text" as I want to display placeholder text. I have added functionality on input that, on focus, input type should be type = "time".

However, while changing to type =" time" width of input also changes. I want to keep the width same as it was on input = "text".

Here is my code:

this.state = {type: 'text'}; 

onFocus() {this.setState({ type: 'time' });}
onBlur() {this.setState({type: 'text'});

       <Form.Label >From</Form.Label>
       <Form.Control type={this.state.type} onFocus={this.onFocus} onBlur={this.onBlur} placeholder="Shop opens" />

1 Answers

KOTIOS On Best Solutions

Add below css rule in your scss or css file which will control your input width at any point of time :

custom-input-width {
  width : 250px !important; // you can set as per your requirement

Apply this css rule on your input in react :

<input className="custom-input-width" />