Hacktoberfest 2026: los issues que los mantenedores marcaron para octubre, abiertos y aptos para principiantes. Explorar issues de Hacktoberfest

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

Abierto
  • ¿Algo no está bien?
#407 2 comentarios 0 reacciones 0 asignados Ver en GitHub

Nadie ha tomado este issue todavía.

Evaluación

Dificultad
4/5
Tiempo estimado
3-5 días
Aptitud para principiantes
68/100
Tipo de issue
Error
Claridad
Bastante claro
Estado de actividad
Activo
Stack tecnológico
react, typescript
Área
frontend

Línea de trabajo

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.

Escrito por el modelo de indexación a partir del texto del issue.

Descripción

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.

Lenguaje dominante
TypeScript
Estrellas
18
Forks
4
Merge medio
51 min
PR fusionados (30 d)
8

Preparar el entorno

Este proyecto no incluye contenedor de desarrollo, Dockerfile ni guía de contribución, así que la configuración corre por tu cuenta: empieza por su README y consulta nuestra guía para la primera contribución para los pasos generales.

Primeros pasos

  1. Lee el issue completo y luego la guía de contribución del proyecto.
  2. Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
  3. Haz un fork del repositorio y trabaja en una rama.
  4. Abre un pull request que haga referencia al número del issue.

Más de vaadin/react-components

Todos los issues de vaadin/react-components

Issues similares

Más issues de TypeScript

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.