[Bug]: TypeScript for onToggle in TreeNode broken in React 19
Author: samueldmeyerCreated Sep 17, 2026Updated Sep 17, 2026
Labelstype: bug 🐛status: help wanted 👐good first issue 👋browser: chromepackage: @carbon/reactplatform: iosneeds: community contributionadopter: strategic-product
Package
@carbon/react
Browser
Edge, Chrome
Package version
v1.116.0
React version
v19.3.0
Description
I'm having a TypeScript issue related to onToggle in TreeNode when upgrading to React 19. React 19 added a native ToggleEventHandler that is expected for onToggle, so the function required ends up being (UncontrolledOnToggle | ControlledOnToggle) & ToggleEventHandler<HTMLElement> which can't really be met.
Type '((UncontrolledOnToggle | ControlledOnToggle) & ToggleEventHandler<HTMLElement>) | ((_: MouseEvent<...> | KeyboardEvent<...>, node?: Pick<...> | undefined) => void)' is not assignable to type '((UncontrolledOnToggle | ControlledOnToggle) & ToggleEventHandler<HTMLElement>) | undefined'.
Type '(_: React.MouseEvent | React.KeyboardEvent, node?: Pick<TreeNodeProps, "id" | "isExpanded">) => void' is not assignable to type '((UncontrolledOnToggle | ControlledOnToggle) & ToggleEventHandler<HTMLElement>) | undefined'.
Type '(_: React.MouseEvent | React.KeyboardEvent, node?: Pick<TreeNodeProps, "id" | "isExpanded">) => void' is not assignable to type 'UncontrolledOnToggle & ToggleEventHandler<HTMLElement>'.
Type '(_: React.MouseEvent | React.KeyboardEvent, node?: Pick<TreeNodeProps, "id" | "isExpanded">) => void' is not assignable to type 'ToggleEventHandler<HTMLElement>'.
Types of parameters '_' and 'event' are incompatible.
Type 'ToggleEvent<HTMLElement>' is not assignable to type 'MouseEvent<Element, MouseEvent> | KeyboardEvent<Element>'.
Type 'ToggleEvent<HTMLElement>' is missing the following properties from type 'KeyboardEvent<Element>': altKey, charCode, ctrlKey, code, and 11 more.ts(2322)
TreeNode.d.ts(170, 5): The expected type comes from property 'onToggle' which is declared here on type 'IntrinsicAttributes & { active?: string | number | undefined; children?: ReactNode; className?: string | undefined; defaultIsExpanded?: boolean | undefined; ... 14 more ...; autoAlign?: boolean | undefined; } & Omit<...> & RefAttributes<...>'Reproduction/example
Already reproduced by Nandan Devadula
https://github.com/user-attachments/assets/c3af7133-3696-414b-9354-e4d1372bb7b4
Steps to reproduce
Use onToggle from TreeNode in React 19.
Suggested Severity
Medium (Severity 3) = User can complete task, and/or has a workaround within the user experience of a given component.
Project name
watsonx.data integration (StreamSets)
Code of Conduct
- I agree to follow this project's Code of Conduct
- I checked the current issues for duplicate problems
Source: carbon-design-system/carbon