Description
The problem in depth
I was following the example listed at: https://v7.mui.com/x/react-tree-view/rich-tree-view/ordering/#only-trigger-the-reordering-from-a-drag-handle.
The TreeItem2IconContainer:
<TreeItem2IconContainer
draggable={draggable}
onDragStart={handleDragStart}
onDragOver={onDragOver}
onDragEnd={onDragEnd}
>
exposes React.DragEventHandler<HTMLDivElement> events, but further up in the example we have
const { draggable, onDragStart, onDragOver, onDragEnd, ...otherRootProps } = getRootProps(other)
for which it expects React.DragEventHandler<HTMLLIElement>. So when I run the application, I get the following errors:
ERROR in [redacted]:120:17
TS2345: Argument of type 'DragEvent<HTMLDivElement>' is not assignable to parameter of type 'DragEvent<HTMLLIElement>'.
Type 'HTMLDivElement' is missing the following properties from type 'HTMLLIElement': type, value
118 | }
119 | console.debug('Drag start: ', itemId)
> 120 | onDragStart(event)
| ^^^^^
121 | event.dataTransfer.setDragImage(
122 | (event.target as HTMLElement).parentElement ?? document.body,
123 | 0,
ERROR in [redacted]:214:17
TS2322: Type 'DragEventHandler<HTMLLIElement> | undefined' is not assignable to type 'DragEventHandler<HTMLDivElement> | undefined'.
Type 'DragEventHandler<HTMLLIElement>' is not assignable to type 'DragEventHandler<HTMLDivElement>'.
Property 'align' is missing in type 'HTMLLIElement' but required in type 'HTMLDivElement'.
212 | draggable={draggable}
213 | onDragStart={handleDragStart}
> 214 | onDragOver={onDragOver}
| ^^^^^^^^^^
215 | onDragEnd={onDragEnd}
216 | >
217 | <DragIndicatorIcon />
ERROR in [redacted]215:17
TS2322: Type 'DragEventHandler<HTMLLIElement> | undefined' is not assignable to type 'DragEventHandler<HTMLDivElement> | undefined'.
Type 'DragEventHandler<HTMLLIElement>' is not assignable to type 'DragEventHandler<HTMLDivElement>'.
Property 'align' is missing in type 'HTMLLIElement' but required in type 'HTMLDivElement'.
213 | onDragStart={handleDragStart}
214 | onDragOver={onDragOver}
> 215 | onDragEnd={onDragEnd}
| ^^^^^^^^^
216 | >
217 | <DragIndicatorIcon />
218 | </TreeItem2IconContainer>
How do I fix/reconcile this? I have not tested anything in v8, but I believe we are on the latest v7 version.
Your environment
`npx @mui/envinfo`
Don't forget to mention which browser you used.
Output from `npx @mui/envinfo` goes here.
System:
OS: Linux 5.15 Ubuntu 24.04.2 LTS 24.04.2 LTS (Noble Numbat)
Binaries:
Node: 22.14.0 - ~/.nvm/versions/node/v22.14.0/bin/node
npm: 10.9.2 - ~/.nvm/versions/node/v22.14.0/bin/npm
pnpm: Not Found
Browsers:
Chrome: Not Found
npmPackages:
@emotion/react: ^11.13.0 => 11.14.0
@emotion/styled: ^11.13.0 => 11.14.0
@mui/core-downloads-tracker: 6.4.3
@mui/icons-material: ^6.4.3 => 6.4.3
@mui/material: ^6.4.3 => 6.4.3
@mui/private-theming: 5.16.14
@mui/styled-engine: 5.16.14
@mui/styled-engine-sc: ^5.14.12 => 5.14.12
@mui/system: 5.16.14
@mui/types: 7.2.21
@mui/utils: 5.16.14
@mui/x-data-grid: ^7.15.0 => 7.25.0
@mui/x-date-pickers: ^7.25.0 => 7.25.0
@mui/x-internals: 7.25.0
@mui/x-license: 7.25.0
@mui/x-tree-view: ^7.17.0 => 7.29.0
@mui/x-tree-view-pro: ^7.17.0 => 7.25.0
@types/react: 19.1.2 => 19.1.2
react: 19.1.0 => 19.1.0
react-dom: 19.1.0 => 19.1.0
styled-components: ^5.3.11 => 5.3.11
typescript: ^5.2.0 => 5.7.3
TS Config:
{
"compilerOptions": {
"target": "es2023",
"lib": ["dom", "dom.iterable", "esnext", "webworker"],
"noImplicitAny": true,
"noImplicitThis": true,
"strictNullChecks": true,
"allowJs": false,
"skipLibCheck": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"noFallthroughCasesInSwitch": true,
"module": "esnext",
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
"jsx": "react-jsx",
"jsxImportSource": "@emotion/react",
"types": ["node"]
},
"types": ["use-sync-external-store"],
"include": ["src/**/*", "tests/**/*", "playwright.config.ts"]
}
Search keywords: DragEventHandler
Order ID: Order ID: 99412