diff --git a/packages/@mantine/core/src/components/Portal/Portal.test.tsx b/packages/@mantine/core/src/components/Portal/Portal.test.tsx index d303c70e67c..c5c39f99146 100644 --- 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(test-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(empty-className); + render(className-with-spaces); + 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 index a8917f9f66d..57ab61628db 100644 --- 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;