Skip to content

diagram: Button silently drops data-testid and other unlisted props #959

Open

Description

@bpowers

The diagram's Button component only passes an explicit list of props to the <button> it renders and silently drops everything else.
ModuleDetails.tsx passes data-testid="add-input-button", which never reaches the DOM, so a test using getByTestId finds nothing.
TypeScript does not catch it because hyphenated JSX attributes (data-*, aria-*) skip excess-property checks.

Most of the other components in src/diagram/components/ use the same allowlist pattern; only a few (TextField, IconButton, Autocomplete, Snackbar, SvgIcon, icons) forward the rest.
Button is the only one with a known dropped attribute today.

Fix

Recommended: type Button's props as extending React.ButtonHTMLAttributes<HTMLButtonElement> and spread the remaining props onto the element, which also removes the three hand-listed aria-* props.
Do the same for other allowlist components when they next need it.
Alternative: delete the dead data-testid and leave the components explicit-only; smaller, but the trap stays.

Pointers

  • src/diagram/components/Button.tsx
  • src/diagram/ModuleDetails.tsx (add-input-button)

Activity

  1. added
    frontendInvolved the React-based Typescript frontend
    hygieneToil, but its useful to get get too behind on it
    on Oct 12, 2026
  2. changed the title [-]diagram: Button silently drops unknown props (dead data-testid in ModuleDetails)[/-] [+]diagram: Button silently drops data-testid and other unlisted props[/+] on Oct 12, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    frontendInvolved the React-based Typescript frontendhygieneToil, but its useful to get get too behind on it

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions