Hacktoberfest 2026：メンテナが10月に向けて印を付けた、オープンで初心者向けの issue。 Hacktoberfest の issue を見る

[2.0] Event handlers fired synchronously from an effect (focus(), showModal()) inherit the effect's strict-read window

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

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

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

評価

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

調査の方向性

Start by tracing how Solid delegates DOM event handlers and manages strict-read and effect-callback state when native calls such as focus() dispatch events synchronously. Add or locate a regression test for an effect-triggered focus event whose handler reads a prop, and check the dialog showModal()/close() cases described here. Done means these handlers run with a clean reactive state, without the strict-read warning or effect-callback phase.

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

説明

Version: solid-js / @solidjs/web / @solidjs/signals 2.0.0-rc.15 (the rc.16 and rc.17 changelogs don't mention it)

What happens

A native DOM call that fires events synchronously — el.focus(), dialog.showModal(), dialog.close() — made from the apply half of an effect runs the delegated handlers inside that effect callback. A handler that reads a prop (a normal thing for an event handler to do) then logs [STRICT_READ_UNTRACKED] in dev, as if the read happened in the effect body.

import { createEffect, createSignal } from 'solid-js'

function Field(props: { label: string }) {
  return <input onFocus={() => console.log('focused', props.label)} />
}

export function App() {
  const [open, setOpen] = createSignal(false)
  let box!: HTMLDivElement
  createEffect(open, (isOpen) => {
    if (isOpen) box.querySelector('input')!.focus() // handler runs here
  })
  return (
    <div ref={box}>
      <Field label="Name" />
      <button onClick={() => setOpen(true)}>Edit</button>
    </div>
  )
}

Click "Edit": the focus moves from the effect, onFocus reads props.label, and dev logs [STRICT_READ_UNTRACKED]. Focusing the same input with the mouse logs nothing.

Same with a <dialog> opened with showModal() from an effect: the focus it moves inside and the focus it gives back on close() both fire focus/blur handlers inside the effect callback.

Expected

An event handler runs from a clean reactive state no matter what dispatched the event: no strict-read window and not in the effect-callback phase, the same as for a user's own event. The handler is a one-time snapshot by nature; where the dispatch came from shouldn't change that.

Workaround

We wrap each such native call in untrack(() => el.focus()), which ends the strict-read window for the handlers it fires (the effect-callback phase itself stays, so a computation created in such a handler has no owner).

主要言語
TypeScript
スター
36.2k
フォーク
1.1k
平均マージ
10時間 38分
マージ済み PR（30日）
352

環境構築

はじめの一歩

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

solidjs/solid のほかの issue

solidjs/solid の issue をすべて見る

似ている issue

TypeScript の issue をもっと見る

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

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