Dispatched mouse events call onClick/onMouseDown on disabled buttons (React skips them)

Ouverte
  • Quelque chose ne va pas ?
#139 1 commentaire 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é
3/5
Temps estimé
1-2 jours
Accessibilité débutants
68/100
Type d'issue
Bug
Clarté
Clairement spécifiée
Activité
Active
Stack technique
javascript, react, typescript
Domaine
frontend, testing-qa

Piste de recherche

Start by reproducing the issue with the supplied Vitest, jsdom, and Testing Library example, then read React DOM's shouldPreventMouseEvent behavior and find the corresponding event-dispatch path in Redact. Done when dispatched mouse events do not call handlers on disabled button, input, select, or textarea elements, and the regression test passes.

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

Description

Version: @tanstack/redact 0.2.5

A dispatched click on a disabled <button> calls its onClick under Redact. React doesn't: its event system skips mouse events (onClick, onMouseDown, onMouseUp, onDoubleClick, …) on disabled button, input, select and textarea elements (shouldPreventMouseEvent in React DOM).

Real user clicks are unaffected, because browsers don't deliver them to disabled form controls. But element.dispatchEvent(new MouseEvent("click")) and Testing Library's fireEvent.click do reach the element, so tests asserting that a disabled button does nothing fail under Redact.

Repro (Vitest + jsdom + Testing Library)
// @vitest-environment jsdom
import { render, fireEvent } from "@testing-library/react";
import { expect, it, vi } from "vitest";

it("does not call onClick on a disabled button", () => {
  const onClick = vi.fn();
  const onMouseDown = vi.fn();
  const { getByRole } = render(
    <button disabled onClick={onClick} onMouseDown={onMouseDown}>Send</button>
  );
  const button = getByRole("button");
  fireEvent.click(button);
  fireEvent.mouseDown(button);
  button.dispatchEvent(new MouseEvent("click", { bubbles: true }));
  expect(onClick).not.toHaveBeenCalled();
  expect(onMouseDown).not.toHaveBeenCalled();
});
onClick calls onMouseDown calls
React 19 0 ✅ 0 ✅
Redact 0.2.5 2 ❌ 1 ❌
Expected

Like React: don't dispatch mouse event handlers to a disabled button/input/select/textarea (or to handlers on the disabled element when the event targets it).

Found in a TanStack Start app: a test checks that a "send" button stays inert while an earlier send is still unclear (disabled set, then fireEvent.click). It passes under React and fails under Redact.

Langage dominant
TypeScript
Étoiles
565
Forks
27
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.