Alert followed by toast body padding-right issue

Current behavior

When opening an alert, with scrollbarPadding: true (default), and then chaining a toast to it, the toast seems to inherit the alert’s states.previousBodyPadding, setting a body padding even without a backdrop or removal of the scrollbar. Somewhat related to #678

Note that this doesn’t replicate if the script is triggered straight on page load, presumably because not all elements have been properly rendered yet.

Note 2: this applies when using mixins instances too:

const alert = Swal.mixin({
    heightAuto: false,
    buttonsStyling: false,
    customClass: {
        confirmButton: "btn btn-primary " + defaultClasses,
        cancelButton: "btn-secondary " + defaultClasses
    },
    scrollbarPadding: false
});

const toast = Swal.mixin({
    toast: true,
    type: "success",
    showConfirmButton: false,
    timer: 3000,
    position: "top"
});

export default Swal;
export { alert, toast, Swal as swal, defaultClasses }

async deleteProduct(productId) {            
    var res = await alert.fire({
        type: "warning",
        title: "Do you want to delete this?",
        customClass: {
            cancelButton: "btn-outline-primary " + defaultClasses,
            confirmButton: "btn-danger " + defaultClasses
        },
        showCancelButton: true,
        cancelButtonText: "No, don't delete",
        confirmButtonText: "Yes, delete",
        reverseButtons: true,
        focusCancel: true
    });

    if (res.value === true) {
        await api.delete("products/" + productId);
        var index = this.products.findIndex(a => a.productId == productId);
        this.$delete(this.products, index);
        toast.fire({
            title: "Deleted",
            timer: 3000,
    });
    }
}

Expected behavior

Alert should restore the body’s padding and the toast shouldn’t set any body padding.

Live demo

https://dolomite-saver.glitch.me/ https://jsfiddle.net/n1dbypfa/

[gverni]

Thanks @limonte!

Are instance methods (such as getInput()) supposed to work in the then? Yes.

Currently this is working for the first ~150ms (i.e. animation duration). The following code:

  Swal.fire({
    input: 'text',
    inputClass: 'outer-swal',
  }).then((result) => {
    setTimeout(() => {
      console.log(Swal.getInput().classList)
    },160)
  })

causes the following error in console:

sweetalert2.js:1644 Uncaught TypeError: Cannot read property 'content' of undefined
    at SweetAlert.getInput$1 [as getInput] (sweetalert2.js:1644)
    at Function.SweetAlert.<computed> [as getInput] (sweetalert2.js:2779)
    at sandbox.html:32

I think the reason is that after the animation is finished, we call the unsetWeakMap(). And that makes the instance methods not accessible. I’m going to fix this as well then because to me it’s a bug.

[gverni]

Thanks @limonte. A couple of more questions (they are all related to the fix I’m coding for this issue):

• Are instance methods (such as getInput()) supposed to work in the then?
• If a Swal is fired inside an onClose function, what are the instance methods called in the the then of the main Swal supposed to refer to? For example the following code:

  Swal.fire({
    input: 'text',
    inputClass: 'outer-swal',
    onClose: () => {
      Swal.fire({
        input: 'text',
        inputClass: 'on-close-swal'
      })
    }
  }).then((result) => {
    console.log(Swal.getInput().classList)
  })

Currently is printing:

["swal2-input", "on-close-swal", value: "swal2-input on-close-swal"]

So it’s clearly referring to the Swal fired in the onClose. Is this the expected behaviour?