Controlled checkbox reverts when another state update happens during the click

Ouverte
  • Quelque chose ne va pas ?
#127 2 commentaires 0 réactions 0 personnes assignées Voir sur GitHub

Les mainteneurs répondent en général sous 1 jour

Personne n'a encore pris cette issue.

Évaluation

Difficulté
4/5
Temps estimé
3-5 jours
Accessibilité débutants
18/100
Type d'issue
Bug
Clarté
Plutôt claire
Activité
Active
Stack technique
react, typescript
Domaine
frontend

Piste de recherche

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.

Rédigé par le modèle d'indexation à partir du texte de l'issue.

Description

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.

Langage dominant
TypeScript
Étoiles
537
Forks
22
Merge moyen
10 h 27 min
PR mergées (30 j)
40

Préparer son environnement

Ce projet ne fournit ni conteneur de développement, ni Dockerfile, ni guide de contribution : l'installation est à votre charge. Commencez par son README, et consultez notre guide de la première contribution pour les étapes générales.

Par où commencer

  1. Lisez l'issue en entier, puis le guide de contribution du projet.
  2. Signalez en commentaire que vous la prenez — cela évite que deux personnes fassent le même travail.
  3. Forkez le dépôt et travaillez sur une branche.
  4. Ouvrez une pull request qui référence le numéro de l'issue.

Autres issues de TanStack/redact

Toutes les issues de TanStack/redact

Issues similaires

Plus d'issues TypeScript

Recevez les nouvelles issues par e-mail

Un résumé court des issues GitHub adaptées aux débutants.