S
S
Sergey2020-12-10 13:25:50
JavaScript
Sergey, 2020-12-10 13:25:50

How to trigger focus on an input field and force the keyboard to be invoked in React?

There is an input component. The react-input-mask is screwed to it. It is necessary that when the page loads, the input field has focus and the keyboard is shown (in this case, a numeric one).
I set the ref to the component inside the component itself (I found the option for focus with findDOMNode, the usual ref does not work - this.inputRef returns null)

<InputMask
     ref={ref => this.inputRef = findDOMNode(ref)}
/>


I hang on ComponentDidMount of the component
componentDidMount() {
      this.inputRef.focus();
  }

And it works on desktop. And the phone is somehow strange. When you go to the page - there is no focus. But if you poke in the field and reload the page, the focus remains. But the keyboard is not shown anyway.

Answer the question

In order to leave comments, you need to log in

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question