Help with sequential async modal using Radix Primitive's Dialog component

[dungle-scrubs]

Hi, I'm really close to getting this library to work with Radix Primitives Dialog component, but am not sure what I'm doing wrong.

I'm able to get a normal modal working by connecting useModal's methods to Dialog's props. However, when I attempt to get a sequential modal going while following your async example, it doesn't seem to work after the first modal.

Here's the sandbox that I currently have working.

Are you able to spot what I'm doing wrong?

[alexandredev3]

You can't use an await in the hide method.

  const showChainingModal = async () => {
    await chainingModal.show({ type: "async", children: "this is some text" });

    chainingModal.hide(); // no await in this line....
      // Or you can remove this line above though
      // since you want to show the modal again right after.

    await chainingModal.show({
      type: "async",
      children: "this is some completely different text!"
    });
    chainingModal.hide();
  };

I really didn't understand the logic behind this. It looks like the promise that the hide() returns never resolves 🤔 But anyway, removing the await will do it.

[dungle-scrubs]

@alexandredev3 Thanks it works great now

[supnate]

Right, if you want to wait for the hide animation to finish, you need to call modal.resolveHide() in your modal's afterClose event. So that the next modal opens after the previous one finished hiding transition.

[dungle-scrubs]

Right, if you want to wait for the hide animation to finish, you need to call modal.resolveHide() in your modal's afterClose event. So that the next modal opens after the previous one finished hiding transition.

Thanks, but I'm not able to recognize Radix Primitive's Dialog component's equivalent to something like afterClose, do you see a solution there?

Better question, what would a correct connector look like for this framework when comparing to ones like antdModal, muiDialog, and bootstrapDialog?

[supnate]

You can take a look at: https://github.com/eBay/nice-modal-react/blob/afd18cd263f6c53594835c76138346e6fb8b573a/src/index.tsx#L491 . Helper methods just use correct properties for modal's lifecycle. However, it looks like Radix's dialog doesn't have close transition. So you don't need to care about it. Just don't await hide.