AutoFocus attribute is not triggered on render

Hello,

The autoFocus attribute is not triggered on a render therefor it is impossible to change the focus with that attribute if there are multiple fields.

Currently the only way to change the focus is to give the input a ref and change it on componentDidUpdate()

    componentDidUpdate() {
        if ( this.props.isAutoFocus === true ) {
          this.refs['input' + this.props.line ].focus();
        }
    }


    tempRender = (<li className="content editable" ref={ 'CalculationItem' }>
                    <input
                      ref={ 'input' + this.props.line }
                      autoFocus={ this.props.isAutoFocus }
                    />
                  </li>);

The autoFocus attribute will only work on the initial render.

[merlinpatt]

I know I’m a couple years late to this discussion but I just found this after experiencing my own similar issues.

I understand that you want it to be in line with spec. That’s fine.

It would be great if you added the option to focus on render (could be just autoFocusOnRender), and just have the docs warn people of the behavior if multiple things call for focus at once. Ideally this wouldn’t happen because an app with good UX would have specific conditions for calling autoFocusOnRender on different inputs.

One particular case that I need this for is that I have a full screen editor with a few inputs. I want it to focus on whichever input is the first to not be filled out. This is simple enough with just plain autoFocus.

The issue is that the full screen editor has multiple pages, each with the same input. When I change the page, the inputs themselves are not re-rendered because they haven’t changed. Thus no focus happens.

I do plan to use a similar solution to the one found above, and it would be great to see if this could be added to React. I’d be happy to do a PR if y’all agree it should be in there.

(Apologies if something like this was already added)

[zpao]

As mentioned, this seems like it’s in line with the spec. There may be some inconsistencies because I think we fake it. Focus is one of those things that is really tricky to do declaratively because it’s part of a shared global state. If 2 unrelated components declare that they should be focused in a single render pass, who is right? So we give you the hooks to manage that state yourself but we won’t do it for you. Sorry that this has cause you troubles!