React-modal: 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.

[vvlevykin]

@ryanflorence can you please point to a guide that says this?

This article contradicts what you said: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_dialog_role#Focus_management

[kpdecker]

@ryanflorence It seems to me that @vvlevykin has a compelling a11y argument for at least allowing this behavior to be conditionally controlled. For use cases where we do need to have this behavior, i.e. a properly labeled and annotated form, we have to either have a focus+blur+focus cycle that causes validation issues under redux-forms, or we have to play the game of using setTimeout to avoid a race condition with this code and hoping that it works in all situations.

[gertig]

Thanks @SebT for the hack around the setTimeout!

@ryanflorence can you explain why forcing the content to be focused is preferred over allowing autoFocus to work on inputs?

[bl-nero]

This bites me heavily on iOS/Safari. The Safari developers decided to be smarter than everyone, and decided that you can't focus() an input anytime else than when consuming a click event. This means that the setTimeout() hack won't work there. :(

[bl-nero]

@ryanflorence Would you consider reopening this bug because of what I wrote above?

[bl-nero]

@ryanflorence Ping. This is still a problem, and I still haven't found a compelling solution (other than not using react-modal in the first place).

[fritz-c]

componentDidMount/componentDidUpdate weren't working for me, but then I used the onAfterOpen prop as described in this PR's code (using the ref callback rather than the deprecated string notation they used), and I was able to focus on a text input.

[dspnorman]

This appears to be fixed in #222