SweetAlert: block event like JavaScript Alert()

Question

I have a function that asks users for confirmation when selecting a value from a Select dropdown. When using the regular JavaScript confirm(), the change event does not get the newly selected value without clicking on confirm. This can be seen in this Fiddle.

When a value is selected, and the user clicks cancel, the same value is shown in an alert dialog. When the user clicks confirm, the newly selected value is displayed.

However, I'd like to use SweetAlert. When changing the value with SweetAlert, the change happens without even selecting confirm or cancel. As demonstrated in this Fiddle. When a value is selected, an alert dialog is displayed right after selection, unlike with the pure JS Confirm() which blocks the event somehow.

I'd like to achieve the same effect as the JS confirm(), where the change event is not triggered while the user has not clicked confirm or cancel, when using SweetAlert.

Aside from both Fiddles which demonstrate the problem, here's the code I'm using:

Some simple HTML select:

<select id="dropdownId">
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="mercedes">Mercedes</option>
    <option value="audi">Audi</option>
</select>

The JavaScript confirm() version (which does what it needs to do):

var prev_val;
$('#dropdownId').focus(function () {
    prev_val = $(this).val();
}).change(function (e) {
    var select = this;
    $(this).blur();

    var success = confirm('Are you sure you want to change the Dropdown?');
    if (success) {
        // Other changed code would be here...
    } else {
        $(this).val(prev_val);
        return false;
    }
});

$('#dropdownId').change(function (e) {
    alert($(this).val());
});

And the SweetAlert version, where the change event should wait on the response of the SweetAlert dialog.

var prev_val;
$('#dropdownId').focus(function () {
    prev_val = $(this).val();
}).change(function (e) {
    var select = this;
    $(this).blur();

    return swal({
        title: "Are you sure?",
        text: "Change dropdown select?",
        type: "warning",
        showCancelButton: true,
        confirmButtonText: "Yes!",
        cancelButtonText: "No!",
        closeOnConfirm: true,
        closeOnCancel: true
    },
    function (isConfirm) {
        if (isConfirm) {
            return true;
        } else {
            $(select).val(prev_val);
            return false;
        }
    });
});

$('#dropdownId').change(function (e) {
    alert($(this).val());
});

Edit:

Moving the logic to the confirm handler of the dialog does not solve this issue. I'm using a framework (Apache Tapestry) which listens for a change event on the select. When using the solution as RRR stated, in this fiddle, the change event still happens. Which still causes it to fire an event to my backend, unlike with the JS confirm() which does not change the value until confirm was clicked.

Edit 2:

My problem doesn't really seem to be that clear. Here are the steps I undertake to try and show what the root of the problem is:

When using the JS confirm from this fiddle. The following happens:

1. I click on a value
2. It asks for confirmation
3. On confirm, it logs the new value. On cancel, it logs the original value.

When using the SweetAlert dialog, using this fiddle. The following happens:

1. I click on a value
2. It logs the newly selected value, before confirming/cancelling
3. On confirm/cancel I can execute logic.

When using the SweetAlert dialog, as edited by RRR in this fiddle. The following happens:

1. I click on a value
2. It logs the newly selected value, before confirming/cancelling
3. On confirm/cancel, it shows an alert

Both my and RRR's SweetAlert example have the same issue. Namely, step 2. Not the fact that it logs, but the fact that the value actually changes. Unlike in the first pure JS example, where the value does NOT change unless confirm is clicked.

Answer 1

Ok. Here is the issue.

You call 2 different actions at onchange event:
1- The big function...
2- A test alert.

Both occur at the same time. <-- Here lies the confusion!

This is why it appeared to you that swal doesn't "wait" to get an answer from the user.

Try this... And look at your console.log messages:

var prev_val;

$('#dropdownId').focus(function () {
    prev_val = $(this).val();
    console.log("On focus event value : "+prev_val);    // ADDED
    }).change(function (e) {

        var select = this;
        console.log("At the BEGINNING of the change event : "+$(select).val()); // ADDED
        $(this).blur();

        swal({  // REMOVED return in front of it
            title: "Are you sure?",
            text: "Change dropdown select?",
            type: "warning",
            showCancelButton: true,
            confirmButtonText: "Yes!",
            cancelButtonText: "No!",
            closeOnConfirm: true,   // These are default.. useless to specify
            closeOnCancel: true     // These are default.. useless to specify
        },
        function (isConfirm) {
            if (isConfirm) {
                //return true;  // no need to return anything - commented out
                console.log("swal YES");
                console.log("At the END of the change event : "+$(select).val());
            } else {
                $(select).val(prev_val);
                //return false; // no need to return anything - commented out
                console.log("swal NO");
                console.log("At the END of the change event : "+$(select).val());
            }
            // Here is a callback final test alert!
            alert("Callback alert: "+$(select).val());
        });
    });

/*$('#dropdownId').change(function (e) {    // This was a bad idea ! ;)
    alert($(this).val());
});*/

Answer 2

In my case sweet alert 2 was blocking my binded event handlers:

    Swal.fire( // Not works - Nothing will happen onclick
      {html: `<button id="btn1" onclick="alert('clicked')">Delete</button>`,
    )

So i binded the event handlers in javascript instead, on modal open:

    Swal.fire(
      {html: `<button id="btn1">Delete</button>`,
      onOpen: () => {document.querySelector('#btn1').onclick = () => {alert('clicked')}
    )