Toast onOpenChange not being called

[stevecastaneda]

I'm trying to control the state of the toast, but I'm not seeing that onOpenChange is being called when the Toast is rendered.

<ToastPrimitives.Root
        ref={ref}
        onOpenChange={(open) => {
          console.log("internal state:", open);
        }}
        {...props}
      >
        {children}
</ToastPrimitives.Root>

What am I missing?

From the docs, it does appear that I should be able to control the state, right?

[benoitgrelard]

Hey @stevecastaneda, when you are controlling a prop, you tell the component what value that prop should be (so here open tells the component when it should be open). The component then tells you when "it" has made changes internally, via a callback, essentially telling you to update the value your side (so here onOpenChange).

Now, consider that Toast never needs to tell you it needs to "open", because you have told it to open, it will however tell you when it needs to close (for example when the timer expires, or when the close button is pressed).

So you will never see onOpenChange being called with true.

This is how any controlled prop work in React. Think about value, onChange on an input, if you set a value, or even a defaultValue, you won't get called in onChange with that value initially, this is the same thing.

Hopefully this makes some sense.

✌️

[stevecastaneda]

I see; thanks for the detailed explanation. Are you aware of any examples of using Radix Toast with Framer Motion?

I can run animations on mount easily, but tracking the exit is where I'm hitting a roadblock. That's what lead me to try to control the open state of the component using open and onOpenChange.

[joaom00]

https://codesandbox.io/embed/toast-imperative-notifications-8jfl32?codemirror=1

[stevecastaneda]

Thank you!