CODEWITHSUNDEEP
javascriptreactjsreact-reduxredux-form
pareshm
pareshm

Reputation: 4984

Focus redux-form element onClick of button

I am using below code to generate input field using redux-form

    import { Field } from 'redux-form';
    focusForm(){
    }

    <Field
        onClick={() => this.showMessage()}
        placeholder={this.props.placeholderText}
        ref="qaQuery"
        className="form-control"
        type="text"
        component="input"
        name={"inputField"}
        id={this.props.name}
    />
    <Button onClick={() => focusForm()}

I want to focus the field onClick of button. how we can achieve this. I tried with below options:

this.refs['qaQuery'].focus() //Not working - return Field and not actual input filed
document.querySelector("input[name='inputFileName']").focus(); //bad method

Please help me to achieve this, thanks

Upvotes: 0

Views: 1191

Answers (1)

pareshm
pareshm

Reputation: 4984

Below is my answer:

import { Field } from 'redux-form';
    focusForm(){
        this.refs['qaQuery'].getRenderedComponent().focus();
    }

    <Field
        onClick={() => this.showMessage()}
        placeholder={this.props.placeholderText}
        ref="qaQuery"
        className="form-control"
        type="text"
        component="input"
        name={"inputField"}
        id={this.props.name}
    />
    <Button onClick={() => focusForm()}

Upvotes: 0

Related Questions