Implementing a nested modal/drawer pattern

[neefrehman]

I'm currently working on implementing a nested drawer or modal pattern in our application, to allow for more incremental disclosures of information. Some examples of things close to what I'm trying to achieve are this shadcn-compatible nested dialog, or nested drawers in Vaul. It needs to support an arbitrary level of nested (though in reality it will mostly cap out at 3)

My current approach uses context that we can nest, and a minimal version of it can be seen here: https://codesandbox.io/p/devbox/strange-sunset-l37q3n

This works when triggering modal open and close events using onOpenChange, though I've highlighted a suboptimality relating to the fact that Modal's onOpenChange may not work, forcing us to ensure that we also instrument events correctly on DialogTrigger. Where this approach doesn't work, however, is where we want to set the initial open state ourselves. If we wanted to display a pre-opened pair of nested modals (for example, on page load and driven by URL search param state), then onOpenChange won't fire for the second modal since it's open state starts with true. This breaks the interaction in quite an annoying way. I'm wondering if anyone has any tips to get around this, and build nested modal interactions that handle initial open state gracefully?

[snowystinger]

Sorry for the quick response, but had a thought.
If onOpenChange doesn't fire for the already open case, which I believe it shouldn't because the open state hasn't changed, then you could always use an effect to handle the initial state. Something like

useEffect(() => {
  if (props.defaultOpen || props.isOpen) {
    // do whatever incrementing you need here
  }
}, [])

I can see the argument for onOpenChange still being called though, maybe we could consider.

[neefrehman]

Thanks @snowystinger, I think that could work. Though resorting to effects like this always makes me feel I'm doing something wrong! FWIW the full solution would probably look like this, though I'll have to test it in more detail.

const hasRegisteredInitialOpenState = useRef(false);
useEffect(() => {
  if (hasRegisteredInitialOpenState.current) {
    return;
  }
  if (props.defaultOpen || props.isOpen) {
    modalStackingContext.registerNestedModalOpenChange(true);
    hasRegisteredInitialOpenState.current = true;
  }
}, []);

As far as onOpenChange being triggered for initial state, my initial sense is that I can see it being quite an unintuitive behaviour, despite it addressing this problem. Though curious to hear how your thinking evolves on it!

[snowystinger]

Yeah, I get that, though if we implemented the onOpenChange on initial render to handle this case, we'd be doing the same thing since the state didn't actually change.

We actually do this (useEffect state update) in Tab's for the initial selected item if none are specified. That last bit, if none are specified, is the distinction I'm drawing, because here, to have it open initially, you must specify the state.