diff --git a/static/app/components/core/slot/slot.spec.tsx b/static/app/components/core/slot/slot.spec.tsx index d23b461d357c..16b2a26123fb 100644 --- a/static/app/components/core/slot/slot.spec.tsx +++ b/static/app/components/core/slot/slot.spec.tsx @@ -11,7 +11,7 @@ describe('slot', () => { expect(SlotModule.Fallback).toBeDefined(); }); - it('renders children in place when no Outlet is registered', () => { + it('renders nothing when no Outlet is registered', () => { const SlotModule = slot(['header'] as const); render( @@ -22,7 +22,7 @@ describe('slot', () => { ); - expect(screen.getByText('inline content')).toBeInTheDocument(); + expect(screen.queryByText('inline content')).not.toBeInTheDocument(); }); it('portals children to the Outlet element', () => { @@ -44,7 +44,7 @@ describe('slot', () => { ); }); - it('multiple slot consumers render their children independently', () => { + it('multiple slot consumers render nothing independently when no Outlet is registered', () => { const SlotModule = slot(['a', 'b'] as const); render( @@ -58,8 +58,8 @@ describe('slot', () => { ); - expect(screen.getByText('slot a content')).toBeInTheDocument(); - expect(screen.getByText('slot b content')).toBeInTheDocument(); + expect(screen.queryByText('slot a content')).not.toBeInTheDocument(); + expect(screen.queryByText('slot b content')).not.toBeInTheDocument(); }); it('consumer throws when rendered outside provider', () => { diff --git a/static/app/components/core/slot/slot.tsx b/static/app/components/core/slot/slot.tsx index a405d3476a0a..62467617aa47 100644 --- a/static/app/components/core/slot/slot.tsx +++ b/static/app/components/core/slot/slot.tsx @@ -140,8 +140,6 @@ function makeSlotConsumer( return () => dispatch({type: 'decrement counter', name}); }, [dispatch, name]); - const element = state[name]?.element; - // Provide outletNameContext from the consumer so that portaled children // (which don't descend through the outlet in the component tree) can still // read which slot they belong to via useSlotOutletRef. @@ -151,10 +149,12 @@ function makeSlotConsumer( ); + const element = state[name]?.element; + if (!element) { - // Render in place as a fallback when no target element is registered yet - return wrappedChildren; + return null; } + return createPortal(wrappedChildren, element); }