Hacktoberfest 2026: le issue che i maintainer hanno segnato per ottobre, aperte e adatte ai principianti. Sfoglia le issue Hacktoberfest

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

Aperta
  • Qualcosa non va?
#4,235 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à
4/5
Tempo stimato
3-5 giorni
Idoneità per principianti
44/100
Tipo di issue
Bug
Chiarezza
Specificata chiaramente
Stato di attività
Attiva
Stack tecnologico
javascript, typescript
Ambito
frontend, testing

Direzione di ricerca

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.

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

Descrizione

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).

Lingua principale
TypeScript
Stelle
36.2k
Fork
1.1k
Merge medio
10h 34m
PR unite (30g)
364

Preparare l'ambiente

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 solidjs/solid

Tutte le issue di solidjs/solid

Issue simili

Altre issue su TypeScript

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.