diff --git a/packages/components/src/popover/index.tsx b/packages/components/src/popover/index.tsx index c9cec1a5a565e..21f81e0f09e80 100644 --- a/packages/components/src/popover/index.tsx +++ b/packages/components/src/popover/index.tsx @@ -569,17 +569,20 @@ const UnforwardedPopover = ( if ( shouldRenderWithinSlot ) { content = { content }; + } else if ( ! inline ) { + content = createPortal( content, getPopoverFallbackContainer() ); } - if ( ! hasAnchor ) { - content = { content }; - } - - if ( shouldRenderWithinSlot || inline ) { + if ( hasAnchor ) { return content; } - return createPortal( content, getPopoverFallbackContainer() ); + return ( + <> + + { content } + + ); }; /** diff --git a/packages/nux/src/components/dot-tip/test/__snapshots__/index.js.snap b/packages/nux/src/components/dot-tip/test/__snapshots__/index.js.snap index bfdb68b78cf57..29a743a5316de 100644 --- a/packages/nux/src/components/dot-tip/test/__snapshots__/index.js.snap +++ b/packages/nux/src/components/dot-tip/test/__snapshots__/index.js.snap @@ -5,7 +5,7 @@ exports[`DotTip should render correctly 1`] = ` aria-label="Editor tips" class="components-popover nux-dot-tip is-positioned" role="dialog" - style="position: absolute; top: 0px; left: 0px; opacity: 0; transform: translateX(0px) translateY(0px) translateX(-2em) scale(0) translateZ(0); transform-origin: 0% 50% 0;" + style="position: absolute; top: 0px; left: 0px; opacity: 1; transform: none; transform-origin: 0% 50% 0;" tabindex="-1" >
{}; - describe( 'DotTip', () => { beforeEach( () => { jest.useFakeTimers(); @@ -20,26 +18,26 @@ describe( 'DotTip', () => { jest.useRealTimers(); } ); - it( 'should not render anything if invisible', async () => { + it( 'should not render anything if invisible', () => { render( It looks like you’re writing a letter. Would you like help? ); - await act( () => Promise.resolve() ); - expect( screen.queryByRole( 'dialog' ) ).not.toBeInTheDocument(); } ); it( 'should render correctly', async () => { render( - + It looks like you’re writing a letter. Would you like help? ); - await act( () => Promise.resolve() ); + await waitFor( () => + expect( screen.getByRole( 'dialog' ) ).toBePositionedPopover() + ); expect( screen.getByRole( 'dialog' ) ).toMatchSnapshot(); } ); @@ -51,12 +49,14 @@ describe( 'DotTip', () => { const onDismiss = jest.fn(); render( - + It looks like you’re writing a letter. Would you like help? ); - await act( () => Promise.resolve() ); + await waitFor( () => + expect( screen.getByRole( 'dialog' ) ).toBePositionedPopover() + ); await user.click( screen.getByRole( 'button', { name: 'Got it' } ) ); @@ -70,12 +70,14 @@ describe( 'DotTip', () => { const onDisable = jest.fn(); render( - + It looks like you’re writing a letter. Would you like help? ); - await act( () => Promise.resolve() ); + await waitFor( () => + expect( screen.getByRole( 'dialog' ) ).toBePositionedPopover() + ); await user.click( screen.getByRole( 'button', { name: 'Disable tips' } )