Call confirmAlert box from another confirmAlert

[ben-pritchard]

First off, I have been loving confirmAlert and use it all over in my app so thank you.

Right now, I am trying to open a confirmAlert box upon a user clicking a button in a prior confirmAlert box (which should close). However, the second confirmAlert box doesn't open, probably because the first one is still exiting the DOM.

I see there's a callback function for willUnmount() (which doesn't work for triggering the second confirmAlert, probably because the first confirmAlert hasn't quite unmounted yet) but if there were a callback for afterClose() or something, then I could use that for opening the second one. Is this a feature that will be supported?

[GA-MO]

@ben-pritchard Thanks for the issue afterClose will be in version 2.6.0

[GA-MO]

@ben-pritchard Version 2.6.0 is published

[ben-pritchard]

@GA-MO thanks for adding that! It works great but there are 2 warnings in the console when I close the second confirmAlert (which does not use the afterClose() callback) that was called in the first confirmAlert's afterClose() callback.

[GA-MO]

@ben-pritchard Fixed in version 2.6.1

[ben-pritchard]

Works beautifully, thank you!

[mdodge-ecgrow]

@ben-pritchard or @GA-MO Can either of you give a bit of sample code on how to open a second confirm-alert from a button inside the first confirm-alert? I am trying to do that exact same thing and not sure exactly how to go about it.

Here is what I currently have:

confirmAlert({
    customUI: ({ onClose }) => {
        return (
            <div className={'custom-ui-dialog'}>
                <h1>Confirm Remove Comment</h1>
                <div className={'body'}>
                    <h3>Are you sure you want to abort this batch?</h3>
                    <div className={'buttons'}>
                        <button onClick={onClose}>No</button>
                        <button
                            onClick={() => {
                                // do I do another confirmAlert(options) here?
                                onClose();
                            }}
                        >
                            Yes
                        </button>
                    </div>
                </div>
            </div>
        );
    },
    //afterClose: () => {}, <-- what do I put in here?
    closeOnEscape: false,
    closeOnClickOutside: false,
});

Thanks!

[ben-pritchard]

@mdodge-ecgrow, here is how I've used it (I wasn't using the customUI but it should work the same):

confirmAlert({
  title: 'Confirm remove comment',
  message: "Are you sure you want to abort this batch?",
  buttons: [
    {label: 'No', onClick: () => this.didUserConfirmAbort = false},
    {label: 'Yes', onClick: () => this.didUserConfirmAbort = true},
  ],
  afterClose: () => {this.didUserConfirmAbort && this.removeCommentForRealz()}
 });

Then in this.removeCommentForRealz() you can call another confirmAlert(). Hope that helps!

[mdodge-ecgrow]

Wow, that worked beautifully! That is some React-fu code I never would have come up with! Thank you so much!

[mdodge-ecgrow]

OK, so I guess there is one hiccup. It appears like on the first time, it does not show the second confirm alert. But when I open up the original confirm alert a second time, then it works. I'm wondering if it has to do with that issue of state not updating instantly.

My code:

confirmAlert({
            customUI: ({ onClose }) => {
                return (
                    <div className={'custom-ui-dialog'}>
                        <h1>Confirm Abort Batch</h1>
                        <div className={'body'}>
                            <h3>Are you sure you want to abort this batch?</h3>
                            <div className={'buttons'}>
                                <button
                                    onClick={() => {
                                        setConfirmAbort(false);
                                        onClose();
                                    }}
                                >
                                    No
                                </button>
                                <button
                                    onClick={() => {
                                        setConfirmAbort(true);
                                        onClose();
                                    }}
                                >
                                    Yes
                                </button>
                            </div>
                        </div>
                    </div>
                );
            },
            afterClose: () => {
                confirmAbort && showBatchLink(abortBatchID);
            },
            closeOnEscape: false,
            closeOnClickOutside: false,
        });

[ben-pritchard]

Yes if you're using state in your setConfirmAbort() function then you could be right. You could try with a member variable like I did and/or add some console.log()s to see when confirmAbort actually gets set, maybe adding in some async/await in there if you really need to use state.

[mdodge-ecgrow]

Beautiful! I made confirmAbort a local member variable boolean and that did the trick! Thanks again!