Input not focusing on componentDidUpdate

Question

I have an input that is disable by default, but when I dispatch an action to enable it, it should become able. I also want this input to become focused, but I am not able to do that. Here is my component:

 class UserInput extends Component {
    constructor (props) {
        super(props);

        this.state = { responseValue: '' };

        this.responseHandler = this.responseHandler.bind(this);
        this.submitAnswer = this.submitAnswer.bind(this);
    }

    componentDidUpdate (prevProps) {
        if (!this.props.disable && prevProps.disable) {
            this.userInput.focus();
        }
    }

    responseHandler (e) {
        this.setState({ responseValue: e.target.value });
    }

    submitAnswer () {
        this.props.submitUserAnswer(this.state.responseValue);
        this.setState({ responseValue: '' })
    }

    render () {
        return (
            <div className="input-container">
                <input ref={(userInput) => { this.userInput = userInput; }}
                       className="input-main"
                       disabled={this.props.disable}
                       value={this.state.responseValue}
                       onChange={this.responseHandler}
                />
                <button className="input-button" onClick={this.submitAnswer}>{this.props.strings.SEND}</button>
            </div>
        );
    }
}

UserInput.defaultProps = {
    strings: {
        'SEND': 'SEND',
    },
};

UserInput.contextTypes = {
    addSteps: React.PropTypes.func,
};

export default Translate('UserInput')(UserInput);

Thanks in advance!

http://stackoverflow.com/questions/6961526/correct-value-for-disabled-attribute — Dan O, Dec 02 '16 at 20:39

score 0 · Answer 1 · answered Dec 02 '16 at 20:49

I reckon your problem lies here:

if (!this.props.disable && prevProps.disable) {
  this.userInput.focus();
}

this.props.disable will still be its initial value (false) after the update (it's not being updated by a parent component from what I can see) so the call to focus is never invoked.

score 0 · Accepted Answer · answered Dec 02 '16 at 20:53

I ended up doing this, because I needed to also add a placeholder to the disabled input:

class UserInput extends Component {
    constructor (props) {
        super(props);

        this.state = { responseValue: '' };

        this.responseHandler = this.responseHandler.bind(this);
        this.submitAnswer = this.submitAnswer.bind(this);
    }

    responseHandler (e) {
        this.setState({ responseValue: e.target.value });
    }

    submitAnswer () {
        this.props.submitUserAnswer(this.state.responseValue);
        this.setState({ responseValue: '' })
    }

    render () {
        return (
            <div className="input-container">
                { this.props.disable
                    ? <div className="disable-input-box">Wait to type your response</div>
                    : <input
                         className="input-main"
                         disabled={this.props.disable}
                         value={this.state.responseValue}
                         onChange={this.responseHandler}
                         autoFocus
                    />
                }
                <button className="input-button" onClick={this.submitAnswer}>{this.props.strings.SEND}</button>
            </div>
        );
    }
}

Input not focusing on componentDidUpdate

2 Answers2