React error when using Drawer.Stack and Drawer with compound components

[Pirulax]

Dependencies check up

• I have verified that I use latest version of all @mantine/* packages

What version of @mantine/* packages do you have in package.json?

^7.15.

What package has an issue?

@mantine/core

What framework do you use?

Next.js

In which browsers you can reproduce the issue?

Chrome

Describe the bug

When using a drawer built with compound components, the following error appears:

React does not recognize the `stackId` prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase `stackid` instead. If you accidentally passed it from a parent component, remove it from the DOM element.

Though, everything seems to work just fine.

When using Drawer.Stack + simple Drawer (not with compound components), there are no errors.

The repro below is basically the code from mantine.dev, but edited so that one of the 3 drawers is made up using compund components.

If possible, include a link to a codesandbox with a minimal reproduction

https://codesandbox.io/p/sandbox/mantine-v7-forked-zhtqt7?workspaceId=ws_D7hskDRdDhrJSNVE9PXVxw

Possible fix

No response

Self-service

• I would be willing to implement a fix for this issue

[niravbhimani53]

@Pirulax The error message you shared seems to be a warning message. Ideally, you can ignore this message.

When using the <Drawer> component, you won't see the warning message because the library is filtering out the stackId value from props. You can see here

mantine/packages/@mantine/core/src/components/Drawer/Drawer.tsx

Lines 76 to 87 in d19c5cb

	const {
	title,
	withOverlay,
	overlayProps,
	withCloseButton,
	closeButtonProps,
	children,
	opened,
	stackId,
	zIndex,
	...others
	} = useProps('Drawer', defaultProps, _props);

When you use the <Drawer.Root> component, you will see a warning message because Mantine library is not filtering out custom props and React doesn't like custom prop names (except prop names starting with the $ symbol).

mantine/packages/@mantine/core/src/components/Drawer/DrawerRoot.tsx

Lines 113 to 125 in 97eb4d4

	const {
	classNames,
	className,
	style,
	styles,
	unstyled,
	vars,
	scrollAreaComponent,
	position,
	transitionProps,
	radius,
	...others
	} = props;

Below is a workaround to avoid seeing the warning message. I know it not elegant solution but a quick work around to avoid seeing warning messages.

function Demo() {
  const stack = useDrawersStack([
    "delete-page",
    "confirm-action",
    "really-confirm-action",
  ]);

  const stackProps = { ...stack.register("delete-page") };

  return <>
    <Drawer.Stack>
      <Drawer.Root opened={stackProps} onClose={stackProps.onClose}>
        {/* {...code} */}
      </Drawer.Root>
    </Drawer.Stack>

    <Button variant="default" onClick={() => stack.open("delete-page")}>
      Open drawer
    </Button>
  </>
}

To avoid seeing warning messages like this you can try this solution here, this can disable the warning messages you saw. Please note that I haven't tested the changes. These changes can be enabled on the Mantine library itself or on your project itself. A better solution would be to avoid passing unknown props to React components. There might be a better solution which others might suggest.

[Pirulax]

To me it seems like as if the stackId prop isn't used in Drawer.Root at all?
Can't it be filtered out as well?

[rtivital]

Drawer.Stack component does not work with compound Drawer components, it is mentioned in the documentation - https://mantine.dev/core/drawer/#drawerstack. It is not planned to add support for this feature, as it impacts multiple parts of the component which you render on your side.

[Pirulax]

I'm sorry, you're right.
Didn't notice that in the docs, but now that I read it again, it's there.
Perhaps I'd be nice to put up some banner to make it more noticeable?