Controlled checkbox reverts when another state update happens during the click

Aperta
  • Qualcosa non va?
#127 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
18/100
Tipo di issue
Bug
Chiarezza
Abbastanza chiara
Stato di attività
Attiva
Stack tecnologico
react, typescript
Ambito
frontend

Direzione di ricerca

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.

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

Descrizione

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.

Lingua principale
TypeScript
Stelle
537
Fork
22
Merge medio
2h 19m
PR unite (30g)
24

Preparare l'ambiente

Questo progetto non fornisce container di sviluppo, Dockerfile né guida per i contributori, quindi l'ambiente è a tuo carico: parti dal suo README e consulta la nostra guida al primo contributo per i passaggi generali.

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 TanStack/redact

Tutte le issue di TanStack/redact

Issue simili

Altre issue su TypeScript

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.