How to focus on primary button when modal loads?

[kevhou]

I can't seem to use jquery .focus() inside componentdidmount.

Someone please help!

[olegshilov]

@kevhou try using Refs

[arasmussen]

I'm having a similar problem with not being able to .focus something inside componentDidMount. I'm using refs.

var VIEWER_REF = 'VIEWER';
var PhotoViewer = React.createClass({
  componentDidMount: function() {
    this.refs[VIEWER_REF].getDOMNode().focus();
  },
  render: function() {
    return (
      <div tabIndex="0" ref={VIEWER_REF}>
        {contents}
      </div>
    );
  },
});

I've verified that this.refs[VIEWER_REF].getDOMNode().focus() is defined and being called. It worked before I put my PhotoViewer inside react-modal.

[arasmussen]

Also worth noting that document.activeElement (currently focused element) after my PhotoViewer opens is the ReactModal__Content element, so it seems like it's stealing focus from me. Why does the modal need focus?

[arasmussen]

Can we get a prop (default true) so that we can disable this functionality? I don't see why the Modal needs focus. I'm happy to manually pipe through ESC to changing isOpen to false.

[arasmussen]

Also sorry for the quadruple post, but a temporary workaround is the following:

componentDidMount: function() {
  setTimeout(function() {
    this.refs[MY_REF].getDOMNode().focus();
  }.bind(this), 0);
},

[brandly]

In case anyone else comes across this, as of v0.13, getDOMNode() is deprecated. The above example would be changed to this:

componentDidMount: function() {
  setTimeout(function() {
    React.findDOMNode(this.refs[MY_REF]).focus();
  }.bind(this), 0);
},

[brandly]

if you want to focus on an input, you should just be able to put autoFocus on it, unless you need more control over it

[tazsoulis]

i have the same problem http://prntscr.com/8f6cve

[brandly]

i think you just put <input autoFocus />. source

[tomhirschfeld]

I'm also having the issue where the react-modal becomes the active element upon opening and I need a way to prevent this from happening. Using doesn't work correctly. What happens is, the focus is set on the input initially, but then set on the modal within <100 ms after mounting.

[SebT]

autoFocus doesn't work because it focuses the input when the modal is mounted.

We need to focus the input every time the modal opens instead:

componentDidUpdate: function(prevProps, prevState) {
  if (prevState.yourVar !== this.state.yourVar && this.state.yourVar === true) {
    setTimeout(function() {
      React.findDOMNode(this.refs.yourInput).focus();
    }.bind(this), 0);
  }
}

yourVar is the variable you give to the modal as isOpen.

This works perfectly fine for me.

[wader]

@SebT Thanks. Do you know why setTimeout is needed? if i log in a ref callback i see that componentDidUpdate is called before the ref callback... is that how it is suppose to work?

[ryanflorence]

Let's say you are a screen reader user, when the modal opens, and you folks go and focus the primary button, how does the user know what the content of the modal says? They don't. They also don't know if they should move the virtual cursor up or down to find out.

I can't remember why it's in a setTimeout, but I guess it's nice that it keeps you from confusing blind folks :P

If there's a good accessibility argument here, I'll reopen, but as far as I can tell we are doing the most accessible thing, which is the primary goal of this component.