toast action with button issue in its isLoading prop

[RenzoBA]

I've created a toast with 2 buttons (delete and cancel) like this:

with this source code:

The issue is that when I click on the Delete button, the button does not change its "isLoading" property to true, and it appears as if nothing is loading. In other words, I would like to see the spinner on the left side of the word "Delete" when I click on it. Like this:

Note: I have confirmed that the value of "isDelLoading" is working correctly (it changes to true when I click the delete button).

[smaldd14]

I have a similar problem that is only happening on mobile. I display the toast like this:

      toast({
        title: "Are you sure?",
        description: "The more questions you answer, the more accurate your recommendations will be.",
        action: <ToastAction altText="generate" onClick={getRecommendations}>Generate</ToastAction>,
        duration: 5000,
      }); 

But, clicking "generate" on mobile, does not seem to register. Any update on this?

[jdamon96]

@smaldd14 I'm running into the same issue on mobile. I believe it has to do with the first tap on the ToastAction being used to focus the toast element, and the 2nd tap on the button actually fires the onClick of the provided ToastAction.

I think this doesn't occur on desktop because the users mouse hover before clicking the ToastAction focuses the Toast (unlike on mobile). One can test this by interacting with the docs' Toast with action example on mobile: https://ui.shadcn.com/docs/components/toast#with-action (it takes two taps of "Try Again" to dismiss the toast)

Not sure if there are any solutions at this time - I'm trying to see if I can add an onClick handler to the entire Toast element rather than just the ToastAction.

[shadcn]

This issue has been automatically closed because it received no activity for a while. If you think it was closed by accident, please leave a comment. Thank you.