# jsx-a11y/no-autofocus

> Disallow the `autoFocus` attribute

`autoFocus` moves focus as soon as the element renders. A screen reader starts reading at that element, so the user misses everything before it. On a phone, the keyboard opens and the page scrolls by itself.

`autoFocus={false}` isn't reported. Neither is `autoFocus` inside a `<dialog>`, an element with `role="dialog"`, or an element with a `popover` attribute, because opening one of those is supposed to move focus.

`--fix-suggestions` removes the attribute.

{/* Generated by src/codegen/lint-rule-docs.ts. Do not edit this section. */}

## Configure

Off by default. To turn it on:

```toml bunfig.toml
[lint.rules]
"jsx-a11y/no-autofocus" = "error" # or "warn"
```

Every option, set to its default:

```toml bunfig.toml
[lint.rules]
"jsx-a11y/no-autofocus" = ["error", {
  ignoreNonDOM = false,
}]
```

{/* End of the generated section. */}

## Examples

Reported:

{/* bad */}
```jsx
const search = <input type="search" autoFocus />;
```

Not reported:

{/* good */}
```jsx
const search = <input type="search" />;

const rename = (
  <dialog open>
    <input type="text" autoFocus />
  </dialog>
);
```

## Options

| Option | Default | What it does |
| --- | --- | --- |
| `ignoreNonDOM` | `false` | Only check HTML elements, not components. |

{/* bad */}
```jsx
const search = <SearchBox autoFocus />;
```

{/* good {"options": [{"ignoreNonDOM": true}]} */}
```jsx
const search = <SearchBox autoFocus />;
```