Hacktoberfest 2026: những issue maintainer đã đánh dấu cho tháng Mười, đang mở và phù hợp người mới. Xem issue Hacktoberfest

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

Đang mở
  • Có gì không ổn?
#4,235 0 bình luận 0 reaction 0 người được giao Xem trên GitHub

Maintainer thường phản hồi trong vòng 1 ngày

Chưa có ai nhận issue này.

Đánh giá

Độ khó
4/5
Thời gian dự kiến
3-5 ngày
Mức phù hợp với người mới
44/100
Loại issue
Lỗi
Độ rõ ràng
Đặc tả rõ ràng
Mức độ hoạt động
Sôi nổi
Công nghệ
javascript, typescript
Lĩnh vực
frontend, testing

Hướng nghiên cứu

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.

Do mô hình lập chỉ mục viết ra từ nội dung của issue.

Mô tả

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

Ngôn ngữ chính
TypeScript
Star
36.2k
Fork
1.1k
Merge trung bình
10 giờ 34 phút
Pull request đã merge (30 ngày)
364

Chuẩn bị môi trường

Bắt đầu từ đâu

  1. Đọc hết issue, rồi đọc hướng dẫn đóng góp của dự án.
  2. Bình luận trên issue rằng bạn sẽ nhận — tránh hai người làm cùng một việc.
  3. Fork repository và làm thay đổi trên một nhánh.
  4. Mở pull request có tham chiếu số hiệu của issue.

Issue khác của solidjs/solid

Tất cả issue của solidjs/solid

Issue tương tự

Thêm issue về TypeScript

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.