Confirm on click HTML didn't work with Sweetalert2 but it's work with native browser confirm

When I use native confirm() it's work fine but with Sweeetalert2 it didn't work can any one help ?

I don't know why It's didn't work at all. but error here from Sweetalert2

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <button onclick="confirm('Sure?') && console.log('Work!')">Work fine</button>

    <button onclick="confirmation() && console.log('Work!')">Didn't work</button>


    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@10"></script>

    <script>
        window.confirmation = function () {
            Swal.fire({
                title: 'Are you sure?',
                text: "You won't be able to revert this!",
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#d33',
                cancelButtonColor: '#3085d6',
                confirmButtonText: 'Yes, delete it!',
                reverseButtons: true
            }).then((result) => {
                if (result.isConfirmed) {
                    return true;
                }
            });
        };
    </script>
</body>

</html>

Solution

It works perfectly fine, you get a lovely popup, and the result will return true when the user makes the appropriate choice. But your expectations are wrong.

You are expecting that confirmation returns a truthy value, which it doesn't. Currently the confirmation method as you have defined it, returns undefined, implicitly as you didn't define a return type.

Therefor confirmation() && console.log('works'), simply doesn't work, as you are returning undefined (which is falsy).

So say you would change your confirmation method to return the call of Swal.fire? Then your current handling still wouldn't work, as you now return a Promise, which is truthy but potentially¹ unresolved.

However, as you would need to handle the result of your request in it's current state, it is the safest option, so we can change the confirmation code to this:

window.confirmation = function () {
  return Swal.fire({
    title: 'Are you sure?',
    text: "You won't be able to revert this!",
    icon: 'warning',
    showCancelButton: true,
    confirmButtonColor: '#d33',
    cancelButtonColor: '#3085d6',
    confirmButtonText: 'Yes, delete it!',
    reverseButtons: true
  }).then( result => result.isConfirmed );
};

At this point your code still doesn't "work". If you click the link now, you would see that Work! gets logged on the console, as soon as you open the popup. The reason for that is what I explained above with a promise being truthy. As soon as you click the link, the promise gets returned, is truthy and the statement gets printed to the console, but the user didn't decide yet.

So how to handle this, well, you can see the Promise chain that the sweetalert2 popup has as part of it's boiler plate code. It fires an event, and in some point in the future, if the user makes an action, that will then get resolved by the promise chain.

In the final code, we changed it so it returns the result.isConfirmed, so it returns true or false eventually, but it's a scenario you are not handling yet. The event you fired so long ago has long done it's action, so nobody is the wiser there.

To handle this, you need to add your own interaction with the promise chain and add a then statement inside your code, like so:

<button onclick="confirmation().then( confirmed => confirmed && console.log('Work!') )">
  Didn't work
</button>

this replicates the logic had early. If you inspect it, it goes like this:

confirmation() creates the promise from sweetalert, displaying a message box and returning an unresolved promise
you attach yourself to the end of the promise chain
the user clicks on Yes, delete it
the then chain inside confirmation returns you result.isConfirmed
your then chain inside your button gets called, with confirmed being the result from the previous return value inside the promise chain
when it was confirmed the message gets printed

And so in the end, you get the following snippet with the changes

window.confirmation = function() {
  return Swal.fire({
    title: 'Are you sure?',
    text: "You won't be able to revert this!",
    icon: 'warning',
    showCancelButton: true,
    confirmButtonColor: '#d33',
    cancelButtonColor: '#3085d6',
    confirmButtonText: 'Yes, delete it!',
    reverseButtons: true
  }).then( result => result.isConfirmed );
};

<script src="https://cdn.jsdelivr.net/npm/sweetalert2@10"></script>
<button onclick="confirm('Sure?') && console.log('Work!')">Work fine</button>
<button onclick="confirmation().then( confirmed => confirmed && console.log('Work!') )">Didn't work</button>

¹_{is effectively unresolved in this scenario, as the promise wouldn't resolve until you click on either of the buttons, at which point it would resolve}