Question

17

ReactJS and autofocus

rated 0 times [ 21] [ 4] / answers: 1 / hits: 10285 / 5 Years ago, fri, july 5, 2019, 12:00:00

I have a react-bootstrap modal with an <input>. I want to set the autofocus attribute on the <input>

The following works fine, but shows a warning in the console

<input type=text autofocus='true' />

Warning: Invalid DOM property `autofocus`. Did you mean `autoFocus`?

The following options do not work, in the sense that they do not focus the input when opening the modal:

<input type=text autoFocus='true' />

<input type=text autoFocus={true} />

<input type=text autoFocus />

What is the recommended way of setting autofocus. Or how should I mute the warnings for the example that works well?

Note: This is react 16.8.6

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

leslijessalyng

Add To Favorites

Follow

Total Points: 650

Total Questions: 85

Total Answers: 109

Location: Croatia

Member since Mon, Sep 6, 2021

3 Years ago

leslijessalyng questions

1 Vue dist path for CSS and JS not found

Fri, Feb 21, 20, 00:00, 4 Years ago

1 How do I loop through multiple pages in an API?

Tue, Jul 30, 19, 00:00, 5 Years ago

1 How to fix The message port closed before a response was received. after window.location.reload() in javascript

Wed, Apr 3, 19, 00:00, 5 Years ago

1 TypeError: $ .find is not a function

Wed, Mar 13, 19, 00:00, 5 Years ago

1 Android - Hide text cursor input React Native

Fri, Dec 14, 18, 00:00, 6 Years ago

View All

answered 5 Years ago payne · Accepted Answer

Refs is what you want,

constructor(props) {

    super(props);

    this.myRef = React.createRef();

}



componentDidMount(){

  this.myRef.current.focus();

}



<input type=text  ref={this.myRef} />