Material-ui: Simulate Input focus or make its style trigger via prop

Created on 11 May 2018 · 1Comment · Source: mui-org/material-ui

I'm creating a date picker using Material-UI Input (TextField) as the base. When the textfield is clicked, naturally the date picker pops up and when it's being manipulated the input losses focus - not a wanted behaviour. I'd like to keep the Material-UI's focused style until needed.

Here's example code, if there's a simple and elegant workaround - I'll be happy to hear it

<TextField
        label="Date"
        onFocus={()=>this.setState({focused: true, showDatePicker: true})}
        inputRef={(input) => { this.dateInput = input; }}
        onBlur={ () => this.setState({showDatePicker: false})}
        value={this.state.date ? this.state.date.format('DD-MM-YYYY') : ''}
        className={classes.textField}
/>
 {(this.state.focused || this.state.showDatePicker) &&
  <DayPickerSingleDateController 
           date={this.state.date}
           focused={this.state.focused}
           onDateChange={date => this.setState({ date })}
           onFocusChange={({ focused }) => this.setState({ focused })}
           onOutsideClick={() => this.setState((prevState)=>(!prevState.showDatePicker && { focused: 
           false }))}
           ...
 />
}

question

Source