[Popper] Incompatible props: `onResize` and `onResizeCapture`

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Steps to reproduce 🕹

Link to live example:

Steps:

1. Use dependencies @mui/lab:.0.0-alpha.110 and @mui/material:5.10.16
2. Render a Autocomplete Component with property PopperComponent={popperProps => <Popper {...popperProps} />

Current behavior 😯

Typescript error: Type '{ anchorEl: HTMLDivElement | undefined; style: { width: number | undefined; }; key?: Key | null | undefined; className?: string | undefined; component?: "div" | undefined; ... 268 more ...; sx?: SxProps<...> | undefined; }' is missing the following properties from type 'Pick<PopperProps, "key" | "className" | "style" | "component" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | ... 265 more ... | "onResizeCapture">': onResize, onResizeCapture

PopperUnstyledOwnProps in mui/base does not provide the onResize and onResizeCapture props picked by the mui/material Popper components props

Expected behavior 🤔

No Typescript error

Context 🔦

We have to pin @mui/material to version 5.10.15 in order to build our project even though we would prefer to do minor upgrades automatically.

Workaround

See https://github.com/mui/material-ui/issues/35287#issuecomment-1337250566.

Your environment 🌎

System: OS: Linux 5.10 Ubuntu 22.04.1 LTS 22.04.1 LTS (Jammy Jellyfish) Binaries: Node: 16.18.1 - ~/.nvm/versions/node/v16.18.1/bin/node Yarn: 3.2.0 - ~/.nvm/versions/node/v16.18.1/bin/yarn npm: 8.19.2 - ~/.nvm/versions/node/v16.18.1/bin/npm Browsers: Chrome: Not Found Firefox: 106.0.2 npmPackages: @emotion/react: 11.10.5 @emotion/styled: 11.10.5 @mui/base: 5.0.0-alpha.108 @mui/core-downloads-tracker: 5.10.16 @mui/icons-material: 5.10.16 @mui/lab: 5.0.0-alpha.110 @mui/material: 5.10.16 @mui/private-theming: 5.10.16 @mui/styled-engine: 5.10.16 @mui/styles: 5.10.16 @mui/system: 5.10.16 @mui/types: 7.2.2 @mui/utils: 5.10.16 @types/react: ^17.0.44 => 17.0.52 react: ^17.0.2 => 17.0.2 react-dom: ^17.0.2 => 17.0.2 typescript: ~4.6.4 => 4.6.4

[michaldudak]

It seems that the issue is caused by a type mismatch between @types/react@17 and @types/react@18. As a workaround, you can add the following module augmentation code to your projects:

declare global {
  namespace React {
    interface DOMAttributes<T> {
      onResize?: ReactEventHandler<T> | undefined;
      onResizeCapture?: ReactEventHandler<T> | undefined;
      nonce?: string | undefined;
    }
  }
}

Solving this “properly” is a pickle, to be honest. Apparently DefinitelyTyped can’t add these two fields to React 17 typings, because they are only supported in 18. We may have to live with this workaround for longer, unfortunately.

[michaldudak]

We’re not planning to remove support for React 17.