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

[mbmx10]

Duplicates

• [X] I have searched the existing issues

Latest version

• [X] 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

[thibaultadet]

I have the same issue on Popper and Timeline components after updating Mui packages to latest version:

• "@mui/icons-material": "^5.10.16"
• "@mui/lab": "^5.0.0-alpha.110"
• "@mui/material": "^5.10.16"
• "@mui/styles": "^5.10.16"

same Typescript error: Type '{ children: Element[]; sx: { p: number; }; }' is missing the following properties from type 'Pick<TimelineProps, "classes" | "title" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | ... 252 more ... | "onResizeCapture">': nonce, onResize, onResizeCapture

[heath-freenome]

Definitely wasn't expecting a patch release to blow up my build... getting this:

node_modules/@mui/material/Popper/Popper.d.ts:36:73 - error TS2344: Type '"key" | "id" | "open" | "color" | "container" | "transition" | "translate" | "hidden" | "slot" | "style" | "title" | "dir" | "accessKey" | "draggable" | "lang" | "className" | "prefix" | ... 256 more ... | "componentsProps"' does not satisfy the constraint '"key" | "id" | "open" | "color" | "container" | "transition" | "translate" | "hidden" | "slot" | "style" | "title" | "dir" | "accessKey" | "draggable" | "lang" | "className" | "prefix" | ... 255 more ... | "componentsProps"'.
  Type '"onResize"' is not assignable to type '"key" | "id" | "open" | "color" | "container" | "transition" | "translate" | "hidden" | "slot" | "style" | "title" | "dir" | "accessKey" | "draggable" | "lang" | "className" | "prefix" | ... 255 more ... | "componentsProps"'. Did you mean '"onReset"'?

36 declare const Popper: React.ForwardRefExoticComponent<Pick<PopperProps, "hidden" | "color" | "style" | "open" | "translate" | "transition" | "slot" | "title" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "id" | "lang" | "nonce" | "placeholder" | "spellCheck" | "tabIndex" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onResize" | "onResizeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "component" | "sx" | "components" | "container" | "placement" | "disablePortal" | "modifiers" | "anchorEl" | "keepMounted" | "popperOptions" | "popperRef" | "slotProps" | "slots" | "componentsProps"> & React.RefAttributes<HTMLDivElement>>;

[hortizgarrido]

I am on the same boat

[IdoiaRojo]

Same here

[IdoiaRojo]

Not working either with 5.10.15 or 5.10.14

[Primajin]

<Popper
  onResize={undefined}
  onResizeCapture={undefined}
  ...
/>

will mitigate the issue until future fix 😉

Although this might throw in your tests:

Warning: Unknown event handler property `onResizeCapture`. It will be ignored.

😕

[IdoiaRojo]

In my case the problem is that I can't even build the project using vite.js, I'm not using directly Popper

[Primajin]

@IdoiaRojo If you don't use Popper, this also happens on Timeline and probably other components though.

[RyanBarclay]

Can confirm I am seeing this on popper when bumping versions up between this version of MUI

5.10.16

    "@mui/icons-material": "5.10.16",
    "@mui/material": "5.10.16",
    "@mui/styled-engine": "npm:@mui/styled-engine-sc@latest",
    "@mui/styles": "5.10.16",
    "@mui/x-date-pickers": "5.0.9", 

src/components/elements/PopperMenu/index.tsx:37:6 - error TS2769: No overload matches this call.
  Overload 1 of 2, '(props: Omit<Omit<Pick<PopperProps, "children" | "style" | "title" | "slot" | "id" | "color" | "key" | "components" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | ... 262 more ... | "onResizeCapture"> & RefAttributes<...>, never> & Partial<...>, "theme"> & { ...; } & { ...; }): ReactElement<...>', gave the following error.
    Type '{ children: Element; placement: Placement | undefined; open: boolean; anchorEl: any; ref: Ref<any>; }' is missing the following properties from type 'Omit<Omit<Pick<PopperProps, "children" | "style" | "title" | "slot" | "id" | "color" | "key" | "components" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | ... 262 more ... | "onResizeCapture"> & RefAttributes<...>, never> & Partial<...>, "theme">': nonce, onResize, onResizeCapture
  Overload 2 of 2, '(props: StyledComponentPropsWithAs<ForwardRefExoticComponent<Pick<PopperProps, "children" | "style" | "title" | "slot" | "id" | "color" | "key" | "components" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | ... 262 more ... | "onResizeCapture"> & RefAttributes<...>>, DefaultTheme, {}, never, ForwardRefExoticComponent<...>>): ReactElement<...>', gave the following error.
    Type '{ children: Element; placement: Placement | undefined; open: boolean; anchorEl: any; ref: Ref<any>; }' is missing the following properties from type 'Omit<Omit<Pick<PopperProps, "children" | "style" | "title" | "slot" | "id" | "color" | "key" | "components" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | ... 262 more ... | "onResizeCapture"> & RefAttributes<...>, never> & Partial<...>, "theme">': nonce, onResize, onResizeCapture

37     <Popper

5.10.15

    "@mui/icons-material": "5.10.15",
    "@mui/material": "5.10.15",
    "@mui/styled-engine": "npm:@mui/styled-engine-sc@latest",
    "@mui/styles": "5.10.15",
    "@mui/x-date-pickers": "5.0.9",

yarn run v1.22.19
$ tsc -p tsconfig.test.json
✨  Done in 35.37s.

I.E. a patch release w/ no release note about Breaking changes should be hot fixed/prioritized with the last minor being reverted and rereleased to not break auto bumping from builds.

[RyanBarclay]

@michaldudak @oliviertassinari Just wanted to bump this because you have a bit of context w/ Popper/Autocomplete component in (https://github.com/mui/material-ui/pull/35160)

This blew up a few of our CI's because this break was updated in the latest patch release.

[m4theushw]

Could you upgrade @types/react to latest version (v18.0.25) and check if the error is gone? These onResize and onResizeCapture were added recently in https://github.com/DefinitelyTyped/DefinitelyTyped/pull/63076. My guess is that because of this change MUI only works now with @types/react: ^18.0.25.

[JonasDoe]

Could you upgrade @types/react to latest version (v18.0.25) and check if the error is gone? These onResize and onResizeCapture were added recently in DefinitelyTyped/DefinitelyTyped#63076. My guess is that because of this change MUI only works now with @types/react: ^18.0.25.

Couldn't test it b/c that requires react 18. Speaking for us, we're not there yet, and just made it to MUI 5 (more ore less). But at least when updating to @types/react v17.0.52 (the latest for react 17) the problem remains.

[ZeeshanTamboli]

Tagging @mui/core since it looks like a high priority issue. I am not certain if it's related to #35273. Also not sure what's the fix but I think we need to support latest version of @types/react for React 17 as well. It would be compatible for MUI users using React 17.

[michaldudak]

I'm looking into it.

[michaldudak]

I understand it occurs only when using React 17, right? I wasn't able to reproduce it using 18 (https://codesandbox.io/s/agitated-mestorf-eheb0b?file=/src/App.tsx).

[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.

[JonasDoe]

Minor addition: I had to do the same approach with the nonce property, i.e. declaring nonce?: string | undefined;, which probably not the cleanest way since DOMAttribute doesn't come with that property at all.

[olliebatch]

Just to help ^ this also occurs on react 18 unless using the latest react/types - upgrading that removed this for me

[cherniavskii]

@michaldudak

How about using @types/react@18 with react@17 as an alternative solution to this issue? Are there any downsides to this?

[Primajin]

How about using @types/react@18 with react@17 as an alternative solution to this issue? Are there any downsides to this? -- @cherniavskii

For me they were incompatible

[cherniavskii]

@Primajin By "incompatible" do you mean that new TS errors appeared elsewhere in the project? Or something else?

[xandris]

This problem hurts my brain. If you're using type definitions only in React 18 it's understandable, we all have to upgrade. If you're not, then we shouldn't have to except tsc expands keyofs. If it didn't expand the keyofs, then those resize event props wouldn't be there, depending on which React is available. By expanding the keyofs, it makes MUI's types consistent everywhere, regardless of which React is available, so even if you could stop tsc from expanding, would you want to? But then they're still inconsistent in user code because user code is pulling in @types/react@17. 😵 I think we'll update to React 18

[michaldudak]

How about using @types/react@18 with react@17 as an alternative solution to this issue? Are there any downsides to this?

Technically it may work, but you'd get types for a library you don't use, which may be confusing at best (or you won't be able to type-check a valid program). The workaround I proposed also introduces attributes that don't exist at runtime, but it only does it for these two attributes. I don't know how many differences are there between types of React 17 and 18, but I bet there are more than just these two attributes.

---

@eps1lon, as a maintainer of React types, do you have any ideas on how to best resolve this issue?

[Primajin]

@Primajin By "incompatible" do you mean that new TS errors appeared elsewhere in the project? Or something else? -- @cherniavskii

No I meant when you bump types to 18 but everything else is 17 you get npm errors:

npm WARN ERESOLVE overriding peer dependency
npm WARN While resolving: [my-project]
npm WARN Found: @types/[email protected]
npm WARN node_modules/@types/react
npm WARN   dev @types/react@"^18.0.26" from the root project
npm WARN   16 more (@mui/base, @mui/icons-material, @mui/lab, @mui/material, ...)

[...]

[the-mgi]

having the same issue, for popper and autocomplete popper, doing undefined for now. i am using the version of mui with react v18 and have types for that accordingly as mui versions i am using

System: OS: Linux 5.15 Ubuntu 22.04.1 LTS 22.04.1 LTS (Jammy Jellyfish) Binaries: Node: 18.8.0 - ~/.nvm/versions/node/v18.8.0/bin/node Yarn: 1.22.19 - ~/.yarn/bin/yarn npm: 8.18.0 - ~/.nvm/versions/node/v18.8.0/bin/npm Browsers: Chrome: 108.0.5359.94 Firefox: Not Found npmPackages: @emotion/react: ^11.9.3 => 11.10.5 @emotion/styled: ^11.9.3 => 11.10.5 @mui/base: 5.0.0-alpha.108 @mui/core-downloads-tracker: 5.10.16 @mui/icons-material: ^5.10.2 => 5.10.16 @mui/material: ^5.9.2 => 5.10.16 @mui/private-theming: 5.10.16 @mui/styled-engine: 5.10.16 @mui/system: 5.10.16 @mui/types: 7.2.2 @mui/utils: 5.10.16 @mui/x-data-grid: ^5.15.0 => 5.17.14 @mui/x-date-pickers: ^5.0.1 => 5.0.9 @types/react: 18.0.15 => 18.0.15 react: ^18.2.0 => 18.2.0 react-dom: ^18.2.0 => 18.2.0 typescript: 4.7.4 => 4.7.4

[cherniavskii]

@Primajin Do you know what dependency requires @types/react@17? react@17 does not require it, and @mui/material requires either v17 or v18

[eps1lon]

Does anybody have a minimal repro for that? Ideally a TypeScript playground but a git repo works as well. Please reduce it to as little code as possible.

[xandris]

@eps1lon How about this? https://github.com/xandris/mui-35287

[cjones26]

@michaldudak any update on this issue? I'm guessing we are just going to have to use the workaround for now?

[kurtwaldowski-echelon]

To reiterate for those who can upgrade: it works on React 18 (18.2.0) along with the latest version of @types/react (18.0.26)