Hacktoberfest 2026: the issues maintainers tagged for October, open and beginner-friendly. Browse Hacktoberfest issues

`autofocus` prop has no effect on initial render in React components (e.g. `<TextField autofocus />`)

Open
  • Is something wrong?
#407 2 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Assessment

Difficulty
4/5
Estimated time
3-5 days
Newbie friendliness
68/100
Issue type
Bug
Clarity
Mostly clear
Activity status
Active
Tech stack
react, typescript
Domain
frontend

Research direction

Start by reading DelegateFocusMixin and the @lit/react createComponent path, then compare the ordering used by createComponentWithOrderedProps. Reproduce the React example and verify that TextField receives focus on initial render while preserving the plain-HTML behavior; existing relevant tests, if present, should cover both property-setting orders.

Written by the indexing model from the issue text.

Description

Impact: Low Severity: Minor UX
Description

When a field is rendered from React with the autofocus prop, it does not receive focus on initial render. Focus stays on <body>.

The prop is set on the element (element.autofocus === true afterwards), but it has no effect. DelegateFocusMixin reads autofocus only once, in ready(). That runs when the element is connected. The React wrapper (@lit/react createComponent) assigns element properties in a useLayoutEffect, after React has inserted the element into the DOM. So ready() has already run with autofocus === false.

Expected outcome

<TextField autofocus /> focuses the field's input on initial render, the same as in plain HTML, where autofocus is set before the element is connected.

Minimal reproducible example
import { TextField } from '@vaadin/react-components/TextField.js';

export default function View() {
  return <TextField label="Email" autofocus />;
}

Open the view, then check document.activeElement → BODY.

Without React, the result depends on when autofocus is set:

const a = document.createElement('vaadin-text-field');
a.autofocus = true;            // set BEFORE connecting
document.body.append(a);       // → gets focus ✅

const b = document.createElement('vaadin-text-field');
document.body.append(b);
b.autofocus = true;            // set AFTER connecting (what the React wrapper does)
                               // → no focus ❌
Workaround

Call focus() from a ref after mount, deferred by one animation frame:

const ref = useRef<TextFieldElement>(null);
useEffect(() => {
  const f = requestAnimationFrame(() => ref.current?.focus());
  return () => cancelAnimationFrame(f);
}, []);
Possible fixes
  • DelegateFocusMixin: also react to autofocus changing to true before the element has been focused or interacted with (e.g. an observer, or reading it in firstUpdated), or
  • @vaadin/react-components: apply autofocus before the element is connected (like createComponentWithOrderedProps does for other order-sensitive props).
Environment
  • Vaadin 25.0.9 (@vaadin/react-components 25.0.9, @vaadin/text-field 25.0.9, @vaadin/a11y-base 25.0.9)
  • @lit/react 1.0.8, React 19.2.4
  • Hilla file router, Spring Boot 4.0.6, Java 25
Browsers

Chrome 153 (Windows 11). Also reproduced in headless Chrome.

Dominant language
TypeScript
Stars
18
Forks
4
Avg merge
44m
Merged PRs (30d)
9

Getting set up

This project ships no dev container, Dockerfile or contributing guide, so setting up is up to you: start from its README, and see our first-contribution guide for the general steps.

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from vaadin/react-components

All issues in vaadin/react-components

Similar issues

More TypeScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.