autoFocus does nothing on elements mounted after page load (no focus() on commit)

Cerrado
  • ¿Algo no está bien?
#131 0 comentarios 0 reacciones 0 asignados Ver en GitHub

Los mantenedores suelen responder en 1 día

Nadie ha tomado este issue todavía.

Evaluación

Dificultad
3/5
Tiempo estimado
1-2 días
Aptitud para principiantes
42/100
Tipo de issue
Error
Claridad
Bien especificado
Estado de actividad
Activo
Stack tecnológico
react, typescript
Área
frontend, web-dev

Línea de trabajo

Start with the autoFocus handling in the attribute mapping in core/attributes.js under dist/, then find where elements are committed to the DOM in the source, since the fix needs a .focus() call on mount. Run the Vitest repro from the issue with jsdom and check that document.activeElement is the input after the button click. Done means that test passes and SSR output still renders the autofocus attribute.

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

Descripción

Version: @tanstack/redact 0.2.4

autoFocus on an element that mounts after the initial page load never receives focus. Redact writes the autofocus attribute, but browsers only honour that attribute during the initial document load. React doesn't rely on the attribute: it calls element.focus() when an autoFocus element is committed (commitMount), so it works for elements that appear later (inline edit fields, a code input shown after "send code", fields inside popovers).

Looking at dist/, autofocus only appears in core/attributes.js (attribute name mapping); there is no .focus() call on mount.

Repro (Vitest + jsdom + Testing Library)
// @vitest-environment jsdom
import { render, fireEvent, act } from "@testing-library/react";
import * as React from "react";

function App() {
  const [editing, setEditing] = React.useState(false);
  return (
    <div>
      <button onClick={() => setEditing(true)}>Edit</button>
      {editing && <input aria-label="name" autoFocus />}
    </div>
  );
}

it("focuses an autoFocus input that mounts after an update", async () => {
  const { getByRole, getByLabelText } = render(<App />);
  const button = getByRole("button");
  button.focus();
  fireEvent.click(button);
  await act(async () => {});
  expect(document.activeElement).toBe(getByLabelText("name"));
});
autofocus attribute on the input document.activeElement
React 19 not set INPUT ✅
Redact 0.2.4 set BUTTON ❌

Same result in real browsers (Chromium, production build of a TanStack Start app): in a day picker, typing a value and pressing Enter mounts a note textarea with autoFocus; React focuses it, Redact leaves focus in the picker popup. Our e2e test for that flow fails 4/4 under Redact and passes under React.

Expected

Like React: when an element with autoFocus is inserted by a client render (including after hydration), call .focus() on it once it is in the document. Rendering the attribute in SSR output for the initial load is fine.

Found in three TanStack Start apps (base-ui/shadcn) while moving them to Redact: a login code field shown after the code is sent, inline edit inputs, and a note field in a picker all stopped getting focus.

Lenguaje dominante
TypeScript
Estrellas
537
Forks
22
Merge medio
11 h 28 min
PR fusionados (30 d)
34

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 TanStack/redact

Todos los issues de TanStack/redact

Issues similares

Más issues de TypeScript

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.