Browsers focus an element with the autofocus attribute only when the attribute is already set as the
element is inserted into the page. Inferno inserts the root element of each newly mounted tree into the page first
and sets its props after that, so autoFocus on that element does nothing. Elements further down the
new tree get their props while the tree is still detached, and they are focused.
A page processes autofocus only once, and not at all when something already has focus. Each case therefore runs on its own page load: open it with its link, and don't click in the page until the result appears.
| Case | Code | Expected |
|---|---|---|
| Input inside the rendered form | render(<form><input autoFocus /></form>, container) |
focused |
| Input as the root of render | render(<input autoFocus />, container) |
focused |
| Input added by an update | <form>{added ? <input autoFocus /> : null}</form> |
focused |
| Component rendering the input, added by an update | <form>{added ? <SearchBox /> : null}</form> |
focused |
| Case | Code | Expected |
|---|---|---|
| Attribute set before insertion | input.autofocus = true; form.appendChild(input) |
focused |
| Attribute set after insertion | form.appendChild(input); input.autofocus = true |
not focused |