[@mantine/core] Portal: Fix empty className string throwing error (#5400

) Co-authored-by: jvandersande <jeremie.van-der-sande@ubisoft.com>
mantinedev · Dec 10, 2023 · 3fbe950 · 3fbe950
1 parent 4af40ec
commit 3fbe950
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 1 deletion.
diff --git a/packages/@mantine/core/src/components/Portal/Portal.test.tsx b/packages/@mantine/core/src/components/Portal/Portal.test.tsx
@@ -25,4 +25,16 @@ describe('@mantine/core/Portal', () => {
   it('has correct displayName', () => {
     expect(Portal.displayName).toStrictEqual('@mantine/core/Portal');
   });
+
+  it('syncs its className to the generated Portal node', () => {
+    render(<Portal className="test-portal">test-portal</Portal>);
+    const portal = document.querySelector('[data-portal]')!;
+    expect(portal.classList).toContain('test-portal');
+  });
+
+  it('does not crash when className is empty or contains extra spaces', () => {
+    render(<Portal className="">empty-className</Portal>);
+    render(<Portal className="hello  world">className-with-spaces</Portal>);
+    expect(document.querySelectorAll('[data-portal]')).toHaveLength(2);
+  });
 });
diff --git a/packages/@mantine/core/src/components/Portal/Portal.tsx b/packages/@mantine/core/src/components/Portal/Portal.tsx
@@ -6,7 +6,8 @@ import { useProps } from '../../core';
 function createPortalNode(props: React.ComponentPropsWithoutRef<'div'>) {
   const node = document.createElement('div');
   node.setAttribute('data-portal', 'true');
-  typeof props.className === 'string' && node.classList.add(...props.className.split(' '));
+  typeof props.className === 'string' &&
+    node.classList.add(...props.className.split(' ').filter(Boolean));
   typeof props.style === 'object' && Object.assign(node.style, props.style);
   typeof props.id === 'string' && node.setAttribute('id', props.id);
   return node;