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

Geschlossen
  • Stimmt etwas nicht?
#131 0 Kommentare 0 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen

Maintainer antworten meist innerhalb von 1 Tag

Dieses Issue hat noch niemand übernommen.

Bewertung

Schwierigkeit
3/5
Geschätzter Aufwand
1-2 Tage
Anfängerfreundlichkeit
42/100
Issue-Typ
Bug
Klarheit
Klar beschrieben
Aktivitätsstatus
Aktiv
Tech-Stack
react, typescript
Bereich
frontend, web-dev

Rechercherichtung

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.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Beschreibung

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.

Vorherrschende Sprache
TypeScript
Sterne
537
Forks
22
Ø Merge
11 Std. 28 Min.
Gemergte PRs (30 T.)
34

Entwicklungsumgebung

Dieses Projekt bietet weder Dev-Container noch Dockerfile noch Beitragsleitfaden – die Einrichtung liegt bei Ihnen. Beginnen Sie mit der README; die allgemeinen Schritte stehen in unserem Leitfaden für den ersten Beitrag.

Erste Schritte

  1. Lesen Sie das ganze Issue und danach den Beitragsleitfaden des Projekts.
  2. Schreiben Sie ins Issue, dass Sie es übernehmen — das erspart doppelte Arbeit.
  3. Forken Sie das Repository und arbeiten Sie in einem Branch.
  4. Öffnen Sie einen Pull Request, der die Issue-Nummer nennt.

Mehr aus TanStack/redact

Alle Issues in TanStack/redact

Ähnliche Issues

Weitere Issues zu TypeScript

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.