Controlled checkbox reverts when another state update happens during the click

未关闭
  • 哪里不对？
#127 0 条评论 0 个 reaction 已指派 0 人 在 GitHub 查看

维护者通常 1 天内回复

还没有人认领这个 Issue。

评估

难度
4/5
预计耗时
3-5 天
新手友好度
18/100
Issue 类型
缺陷
描述清晰度
基本清楚
活跃度
活跃
技术栈
react, typescript
领域
frontend

调研方向

The payload names no source files, so start from the reproduction: a controlled input type="checkbox" inside a label, with a document-level click listener that calls setState. Run that snippet in Chromium and confirm the box reverts on the first click. Then trace how a state update flushed in a microtask before change re-applies the old checked value. Done means the box stays checked after onChange runs, and the case is covered by a test alongside the behaviour from #116. Coordinate with #116 before starting, since it touches the same code.

由索引模型根据 Issue 内容生成。

描述

A controlled checkbox can’t be checked when something else updates state from a native click listener, e.g. a click-away listener like the one in MUI’s Snackbar. Redact flushes that update in a microtask before the browser fires change, re-renders the checkbox with the old checked and writes it back to the DOM. The change event then reports the old value, so onChange keeps the box unchecked.

Reproduction
import {useEffect, useState} from 'react'
import {createRoot} from 'react-dom/client'

const App = () => {
  const [clicks, setClicks] = useState(0)
  const [checked, setChecked] = useState(false)

  useEffect(() => {
    const onClick = () => setClicks((n) => n + 1)
    document.addEventListener('click', onClick)
    return () => document.removeEventListener('click', onClick)
  }, [])

  return (
    <label>
      <input
        type="checkbox"
        checked={checked}
        onChange={(e) => setChecked(e.target.checked)}
      />
      Checked: {String(checked)}, document clicks: {clicks}
    </label>
  )
}

createRoot(document.getElementById('root')).render(<App />)

Click the checkbox:

React DOM 19.2.7 Redact 0.2.3
After the 1st click Checked: true Checked: false
After the 2nd click Checked: false Checked: false

On Redact the box never stays checked. Tested in Chromium with Vite and the default redact() plugin.

Expected

As in React DOM, the checkbox keeps the value the browser toggled until change has fired. #116 touches the same code (restoring controlled state after change), but this case calls setState and fails before onChange runs.

主要语言
TypeScript
星标
537
派生
22
平均合并
2 小时 19 分钟
30 天内合并 PR
24

环境准备

这个项目没有提供开发容器、Dockerfile 或贡献指南，环境需要你自己搭建：先看它的 README，通用步骤见我们的新手贡献指南。

从这里开始

  1. 先读完整个 Issue，再读项目的贡献指南。
  2. 在 Issue 下留言说明你要接手 —— 这能避免两个人做同样的事。
  3. Fork 仓库，在一个分支上完成修改。
  4. 提交 Pull Request，并在描述里引用这个 Issue 编号。

TanStack/redact 的其他 Issue

查看 TanStack/redact 的全部 Issue

相似的 Issue

更多 TypeScript Issue

把新 issue 发到你的邮箱

精选适合新手参与的 GitHub issue 摘要。