[bug] No stacking effect if nesting controlled drawers

[MaximKondratev]

Using uncontrolled nested drawers like in example (https://vaul.emilkowal.ski/default#nested-drawers) creates stacking effect as expected. But when using controlled drawers instead, effect is not activated on nested drawer open.

Also, if I try to swipe controlled nested drawer a little, stacking effect appears and kinda works, but appearance looks buggy.

nested.drawers.mov

I have created small repro with copy of https://vaul.emilkowal.ski/default#nested-drawers for both uncontrolled and controlled drawers

[MaximKondratev]

So I managed to debug this and that's what I found.

Stacking effect applies from onChange here by passing onNestedOpenChange to Root in NestedRoot here

onChange is called by Radix Dialog through calling setIsOpen here

But Radix does not fire onOpenChange for controlled component when transitioning from false to true state (it is mentioned here for example radix-ui/primitives#1678 (comment)) and I believe it is more of a feature since state is changed by us and not by radix. On the other side, radix does fire this event for transitioning from true to false state in controlled component, so it may be a bug actually.

If it is intended behavior from radix side, vaul should handle this case separately (or if it's a bug but not fixed by them).

I am not sure what is the correct place to make a fix, but I tested locally with adding useEffect to NestedRoot that calls onNestedOpenChange manually:

export function NestedRoot({ onDrag, onOpenChange, open: nestedIsOpen, ...rest }: DialogProps) {
  const { onNestedDrag, onNestedOpenChange, onNestedRelease } = useDrawerContext();

  if (!onNestedDrag) {
    throw new Error('Drawer.NestedRoot must be placed in another drawer');
  }

  React.useEffect(() => {
      if (nestedIsOpen) {
        onNestedOpenChange(true);
      }
    }, [nestedIsOpen]);

 ...

With this useEffect stacking effect works as intended. I think it should be safe to do since in will only run for nestedIsOpen === true and it is true only for controlled component (undefined for uncontrolled).