Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 5 additions & 5 deletions static/app/components/core/slot/slot.spec.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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(
Expand All @@ -22,7 +22,7 @@ describe('slot', () => {
</SlotModule.Provider>
);

expect(screen.getByText('inline content')).toBeInTheDocument();
expect(screen.queryByText('inline content')).not.toBeInTheDocument();
});

it('portals children to the Outlet element', () => {
Expand All @@ -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(
Expand All @@ -58,8 +58,8 @@ describe('slot', () => {
</SlotModule.Provider>
);

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', () => {
Expand Down
8 changes: 4 additions & 4 deletions static/app/components/core/slot/slot.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -140,8 +140,6 @@ function makeSlotConsumer<T extends Slot>(
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.
Expand All @@ -151,10 +149,12 @@ function makeSlotConsumer<T extends Slot>(
</outletNameContext.Provider>
);

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);
}

Expand Down
Loading