AutoFocus attribute is not triggered on render

[yolcuiskender]

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.

[quantizor]

@omuryolcu In the past, this has been because something else on the page is stealing focus.

Questions like this should be on StackOverflow, etc. as the functionality is very likely not broken.

[yolcuiskender]

@yaycmyk hey Evan,

well this is not a question, it's a bug report IMHO. For me it didn't work and I could only make it work like that. If you guys would prove me wrong, I would be delighted however I'm strongly convinced that this is a bug.

It would be unfair not to report it :)

[quantizor]

You know what, sorry I misread your initial post. The intended behavior is only to move focus on first render, and this is consistent with the HTML spec for autofocus. https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-autofocus

So it's not a bug and your workaround is one of a few possibilities if you want it to remain constantly focused.

[yolcuiskender]

Hey Evan :) @yaycmyk
No problem at all. Maybe react should have something that can also move the focus on render, maybe it would eliminate the use of ref. I don't know, I struggled very much to do this and I was about to give up.

So maybe it's of use to somebody :)

Thank you!

[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!

[yolcuiskender]

Hey Paul! @zpao
No it's OK, just wanted to mention it in case something is wrong.
BTW, the last one activating the focus would be a good choice and react could complain, warning the user :)

Thank you very much for your attention.

[merlinstardust]

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)