React-number-format: After focus() is called on another element the focus is directed back to original element

Created on 15 Aug 2018  路  2Comments  路  Source: s-yadav/react-number-format

I am using two number inputs on my page.
I have implemented some logic to move the focus to the second input once the first has been filled out.

The focus is moved to the second input field but immediately after, the focus is moved back to the first input field. How do I prevent it from moving the focus back?

Here is a simplified version of how it is implemented:
```
class MyClass extends React.Component {
firstRef
secondRef

componentDidUpdate(prevProps) {
if(!prevProps.done && this.props.done) {
secondRef.focus();
}

render () {
return (





);
}
}

Most helpful comment

You can try putting secondRef.focus(); inside a timeout with 0ms.
The above behaviour is happening because of
https://github.com/s-yadav/react-number-format/blob/master/src/number_format.js#L251
which is required as patch for mobile browser.

All 2 comments

You can try putting secondRef.focus(); inside a timeout with 0ms.
The above behaviour is happening because of
https://github.com/s-yadav/react-number-format/blob/master/src/number_format.js#L251
which is required as patch for mobile browser.

@s-yadav Thanks it worked beautifully!

Was this page helpful?
0 / 5 - 0 ratings