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

Chiusa
  • Qualcosa non va?
#131 0 commenti 0 reazioni 0 assegnatari Vedi su GitHub

I maintainer di solito rispondono entro 1 giorno

Nessuno ha ancora preso questa issue.

Valutazione

Difficoltà
3/5
Tempo stimato
1-2 giorni
Idoneità per principianti
42/100
Tipo di issue
Bug
Chiarezza
Specificata chiaramente
Stato di attività
Attiva
Stack tecnologico
react, typescript
Ambito
frontend, web-dev

Direzione di ricerca

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.

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

Descrizione

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.

Lingua principale
TypeScript
Stelle
537
Fork
22
Merge medio
11h 28m
PR unite (30g)
34

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

Tutte le issue di TanStack/redact

Issue simili

Altre issue su TypeScript

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.