A composable system for opening stacked, accessible modals from anywhere in the app.
HOW TO USE THIS CHALLENGE
Model modals as a stack of descriptors with stable ids, content, dismissal rules, and the element that opened each one. Only the top descriptor is interactive. Scroll lock derives from stack length, preventing conflicting booleans.
FrontendHalttype Modal = { id: string; kind: 'dialog' | 'alertdialog'; title: string; dismissOnEscape: boolean; dismissOnOutside: boolean; restoreFocusTo: HTMLElement | null; content: React.ReactNode; };type ModalState = { stack: Modal[] };const top = state.stack.at(-1);Step 1
Open captures the active trigger. Close removes the requested descriptor without assuming it is the only modal. Only the top layer handles Escape and outside interaction.
function reducer(state: ModalState, action: Action): ModalState { if (action.type === 'open') return { stack: [...state.stack, action.modal] }; if (action.type === 'close') return { stack: state.stack.filter((modal) => modal.id !== action.id) }; return state;}Step 2
Use Dialog Title and Description, allow the top layer to be modal, and customize initial focus only for a reason. Prevent accidental auto-focus when destructive confirmations should begin on a safe action.
<Dialog.Root open onOpenChange={(open) => !open && close(id)}> <Dialog.Portal> <Dialog.Overlay /> <Dialog.Content aria-describedby={descriptionId}> <Dialog.Title>{title}</Dialog.Title> {content} </Dialog.Content> </Dialog.Portal></Dialog.Root>Step 3
Each descriptor stores its trigger. Closing the top restores that trigger if connected; closing a lower descriptor while another remains must not pull focus behind the active modal.
Step 4
Apply body scroll lock when the stack changes from zero to one and restore only at zero. Preserve original styles and compensate scrollbar width to avoid layout shift.
Build it yourself first. This is one correct implementation, not the only one — read it top to bottom, then compare the shape of your version.
We are building a manager that can stack multiple dialogs, where only the top one reacts to Escape and outside clicks, focus returns to whatever opened each dialog, and the page behind stays locked from scrolling. The one big idea: model open modals as a stack (an array), not a boolean. The array knows how many layers there are, which is on top, and which element opened each one.
import * as Dialog from "@radix-ui/react-dialog";import { createContext, useCallback, useContext, useEffect, useMemo, useReducer, useRef,} from "react";
type ModalNode = { id: string; title: string; kind: "dialog" | "alertdialog"; render: (close: () => void) => React.ReactNode;};type State = { stack: ModalNode[] };type Action = { type: "open"; modal: ModalNode } | { type: "close"; id: string };
function reducer(state: State, action: Action): State { if (action.type === "open") return { stack: [...state.stack, action.modal] }; return { stack: state.stack.filter((m) => m.id !== action.id) };}
const ModalCtx = createContext<{ open: (modal: Omit<ModalNode, "id">) => void;} | null>(null);
export function useModals() { const ctx = useContext(ModalCtx); if (!ctx) throw new Error("useModals must be used inside <ModalProvider>"); return ctx;}
export function ModalProvider({ children }: { children: React.ReactNode }) { const [state, dispatch] = useReducer(reducer, { stack: [] }); const openers = useRef<Record<string, HTMLElement | null>>({});
const open = useCallback((modal: Omit<ModalNode, "id">) => { const id = crypto.randomUUID(); openers.current[id] = document.activeElement as HTMLElement; // remember the trigger dispatch({ type: "open", modal: { ...modal, id } }); }, []);
const close = useCallback((id: string) => { dispatch({ type: "close", id }); const opener = openers.current[id]; delete openers.current[id]; if (opener?.isConnected) requestAnimationFrame(() => opener.focus()); }, []);
// Scroll lock derived purely from 'is the stack non-empty'. const locked = state.stack.length > 0; useEffect(() => { if (!locked) return; const { overflow, paddingRight } = document.body.style; const scrollbar = window.innerWidth - document.documentElement.clientWidth; document.body.style.overflow = "hidden"; document.body.style.paddingRight = scrollbar + "px"; // avoid layout shift return () => { document.body.style.overflow = overflow; document.body.style.paddingRight = paddingRight; }; }, [locked]);
const value = useMemo(() => ({ open }), [open]);
return ( <ModalCtx.Provider value={value}> {children} {state.stack.map((modal, index) => { const isTop = index === state.stack.length - 1; return ( <Dialog.Root key={modal.id} open modal={isTop} onOpenChange={(next) => { if (!next && isTop) close(modal.id); }} > <Dialog.Portal> <Dialog.Overlay /> <Dialog.Content role={modal.kind} onEscapeKeyDown={(e) => { if (!isTop) e.preventDefault(); }} onInteractOutside={(e) => { if (!isTop || modal.kind === "alertdialog") e.preventDefault(); }} > <Dialog.Title>{modal.title}</Dialog.Title> {modal.render(() => close(modal.id))} </Dialog.Content> </Dialog.Portal> </Dialog.Root> ); })} </ModalCtx.Provider> );}A stack, not a boolean
state.stack is an array of modal descriptors. A single isOpen boolean cannot say 'two dialogs are open, this one is on top, and each was opened by a different button'. The array answers all of that: length is the layer count, the last item is the top.
Each open remembers its trigger
In open(), before anything renders, we read document.activeElement — the element that had focus, which is the button the user clicked — and store it in openers keyed by the new modal id. This is captured per modal, so a stack of three dialogs has three saved triggers.
Close restores focus to the right element
close() removes the descriptor, then looks up its saved trigger and, only if that element is still in the document (isConnected), focuses it on the next frame. If the trigger was unmounted while the modal was open, we skip it rather than call focus on a detached node.
Only the top layer is interactive
isTop is index === stack.length - 1. The top Dialog is modal (it traps focus and marks the rest inert). Escape and outside-click handlers call preventDefault when !isTop, so a key or click cannot close a buried layer or leak through to the one beneath.
alertdialog resists casual dismissal
role is set from modal.kind. For an alertdialog — used for destructive confirmations — onInteractOutside always preventDefaults, so clicking the backdrop does not dismiss it; the user must choose an explicit button.
Scroll lock is derived, not a separate flag
locked is just state.stack.length > 0. The effect adds overflow: hidden to the body when locked becomes true and restores the exact previous inline styles when it becomes false. It also adds padding equal to the scrollbar width so the page does not jump sideways when the scrollbar disappears.
Radix owns the hard focus mechanics
Focus trapping, initial focus, returning focus to the portal boundary, and marking background content inert are all handled by @radix-ui/react-dialog. The manager only owns the stack, the per-modal trigger memory, the layer policy, and the scroll lock.
Answer aloud first. Then open the model answer and compare state ownership, failure handling, accessibility, and trade-offs—not exact wording.
Model answer
A boolean cannot identify multiple layers, their triggers, or dismissal policies. A stack makes topmost ownership and restoration explicit.
Ready to build it?
Implement the brief above in your own environment against a timer close to 75 minutes, then self-review against the rubric before moving on.
Back to all briefs →