Skip to content

[tree view] DragEventHandler<HTMLLIElement> is not compatible with DragEventHandler<HTMLDivElement> #17451

Closed as not planned
@pkothare

Description

@pkothare

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    scope: tree viewChanges or issues related to the tree view productstaleInactive for 7 days (issues) or 30 days (PRs); closed after 5 or 15 more days if no update.status: waiting for authorThe issue needs more input or clarification from the original author before it can proceed.support: commercialSupport request from paid users

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions