Hacktoberfest 2026: le issue che i maintainer hanno segnato per ottobre, aperte e adatte ai principianti. Sfoglia le issue Hacktoberfest

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

Aperta
  • Qualcosa non va?
#407 2 commenti 0 reazioni 0 assegnatari Vedi su GitHub

Nessuno ha ancora preso questa issue.

Valutazione

Difficoltà
4/5
Tempo stimato
3-5 giorni
Idoneità per principianti
68/100
Tipo di issue
Bug
Chiarezza
Abbastanza chiara
Stato di attività
Attiva
Stack tecnologico
react, typescript
Ambito
frontend

Direzione di ricerca

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.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Descrizione

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.

Lingua principale
TypeScript
Stelle
18
Fork
4
Merge medio
51m
PR unite (30g)
8

Preparare l'ambiente

Questo progetto non fornisce container di sviluppo, Dockerfile né guida per i contributori, quindi l'ambiente è a tuo carico: parti dal suo README e consulta la nostra guida al primo contributo per i passaggi generali.

Come iniziare

  1. Leggi tutta la issue e poi la guida ai contributi del progetto.
  2. Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
  3. Fai un fork del repository e lavora su un branch.
  4. Apri una pull request che faccia riferimento al numero della issue.

Altre issue di vaadin/react-components

Tutte le issue di vaadin/react-components

Issue simili

Altre issue su TypeScript

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.