Unable to give focus to Form.Input

Hi,

I’m trying to give focus to an <Form.Input> but I get an error : TypeError: this.searchField.current.focus is not a function. Replacing by a standard <input> make it work.

How can I focus an input ?

Here is a sample code :

import React, {Component} from 'react';
import {Form} from 'react-bulma-components'; 

class Home extends Component {
    constructor(props) {
        super(props);
        this.searchField = React.createRef();
        this.focusSearchField = this.focusSearchField.bind(this);
    }

    render() {
        return <div>
            <Form.Control style={{ marginBottom: 20 }}>
                <Form.Input
                    className="input"
                    type="text" 
                    ref={this.searchField}
                    onChange={e => this.changeFilter(e.target.value)} />
            </Form.Control>

             <Button onClick={this.focusSearchField}>Focus</Button>
        </div>
    }

    focusSearchField() {
        this.searchField.current.focus();
    }
}

export default Home;

[eldyvoon]

domRef or ref won’t work with useRef()?

[gbprod]

That works ! Thanks 😃