tivoni tivoni - 11 months ago 186
React JSX Question

Set focus on a react-bootstrap.Input field using refs.x.getDOMNode.focus

The JSX:

var Button = require("react-bootstrap").Button;
var Input = require("react-bootstrap").Input;
var MyClass = React.createClass({
onclick: function () {
console.log('DOM element', this.refs.email.getDOMNode());
render: function () {
return (
<Button onClick={this.onlick}>Login</Button>
<Input ref='email' type='email' />


  1. The input field is a

  2. The getDOMNode().focus() concept is from Facebook react docs

When the button onclick handler runs, the email input field should be getting the focus, but it's not happening. I found that the react-bootstrap Input field class is rendering the real DOM input field inside a wrapping div. This is the output of the console.log:

<div class="form-group" data-reactid=".1awy8d4e9kw.1.3.$=1$3:">
<input class="form-control" type="email" data-reactid=".1awy8d4e9kw.1.3.$=1$3:$input">

So looks like the input isn't getting the focus because the focus is applied on the wrapping div, which rejects it (I use
in the console to check).

Question is, how to focus on the real

A bit unrelated but React respects the
property. That's useful in case the focus is needed to be set immediately after rendering. Still, it's not a substitute for the programmatic way.

Answer Source

Try getInputDOMNode() instead of getDOMNode().