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

オープン
  • 何か問題がありますか？
#131 コメント 0 件 リアクション 0 件 担当者 0 名 GitHub で見る

メンテナーはふだん 1 日以内に返信

まだ誰も着手していません。

評価

難易度
3/5
見積もり時間
1〜2日
初心者へのやさしさ
42/100
issue の種類
バグ
明瞭さ
明確に書かれている
活発さ
活発
技術スタック
react, typescript
領域
frontend, web-dev

調査の方向性

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.

索引モデルが issue の本文から書いたものです。

説明

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.

主要言語
TypeScript
スター
537
フォーク
22
平均マージ
2時間 19分
マージ済み PR（30日）
24

環境構築

このプロジェクトには開発コンテナ、Dockerfile、コントリビューションガイドがありません。まず README を読み、一般的な手順ははじめてのコントリビューションガイドを参照してください。

はじめの一歩

  1. issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
  2. 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
  3. リポジトリをフォークし、ブランチを切って変更します。
  4. issue 番号を参照したプルリクエストを送ります。

TanStack/redact のほかの issue

TanStack/redact の issue をすべて見る

似ている issue

TypeScript の issue をもっと見る

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。