swal().then(function ()) not firing in Internet Explorer 11

Question

Hoping you can help me with this, I assume there is a small thing I am missing.

My _layout.cshtml contains all the relevant scripts to have sweetheart working on IE:

(this was working in previous versions though we haven't had to support IE for some time)

@if (Request.Browser.Browser == "IE" || Request.Browser.Browser == "InternetExplorer")
{
    <script src="https://npmcdn.com/[email protected]"></script>
}
<script type="text/javascript" src="~/bower_components/sweetalert2/dist/sweetalert2.min.js"></script>

<!--[if IE 9]>
    <script src="~/bower_components/sweetalert2-ie9/dist/sweetalert2.min.js"></script>
<![endif]-->

As you can see, promise is included before sweetalert2 and I know that this is fine as the sweetalert functions on my form submit.

The issue is that when I click "Yes" the .then() function is not being hit, in debugger it is ignored and skipped straight over. This is only relevant to IE, only tested in 11 at the moment I am just going to check other versions now. I cannot work out why this is happening, any ideas?

Relevant .js:

vm.PostCommentData = function (postData, event) {
    var $commentTextBoxId = '#' + vm.createRemedyCommentId;

    if ($($commentTextBoxId).length) {
        var globalTranslations = globalDashboard.GetTranslations();

        swal({
            title: translations.AreYouSureYouWantToSubmit,
            text: '',
            type: 'warning',
            showCancelButton: true,
            confirmButtonText: '<i class="fas fa-thumbs-up"></i> ' + globalTranslations.Yes,
            cancelButtonText: '<i class="fas fa-thumbs-down"></i> ' + globalTranslations.No,
            confirmButtonClass: 'btn btn-success',
            cancelButtonClass: 'btn btn-danger',
            buttonsStyling: false
        }).then(function () {
            vm.state($(event.currentTarget).data('state'));
            var newComment = $($commentTextBoxId).val();
            var errorMessage = $("<ul class='list-unstyled' />");
            var hasErrored = false;

            if (vm.selectedQuestions().length == 0) {
                errorMessage.append("<li>" + translations.AtLeastAQuestionIsRequiredToBeSelected + "</li>");
                hasErrored = true;
            }

            if (vm.selectedDealershipId() == undefined) {
                errorMessage.append("<li>" + translations.PleaseSelectADealership + "</li>");
                hasErrored = true;
            }

            if (newComment === '') {
                errorMessage.append("<li>" + translations.CommentTextIsRequired + "</li>");
                hasErrored = true;
            }

            if (hasErrored) {
                swal({
                    title: translations.Warning,
                    html: errorMessage,
                    type: 'error',
                    buttonsStyling: false,
                    confirmButtonText: '<i class="fas fa-check"></i> ' + globalTranslations.OK,
                    confirmButtonClass: 'btn btn-success'
                });
            }
            else {

                var successMessage = translations.YourRemedyHasBeenSubmitted;
                if (vm.selectedQuestions().length > 1)
                    successMessage = translations.YourRemediesHaveBeenSubmitted;

                swal({
                    title: translations.Completed,
                    text: vm.globalViewModel().decodeEntities(successMessage),
                    type: 'success',
                    buttonsStyling: false,
                    confirmButtonText: '<i class="fas fa-check"></i> ' + globalTranslations.OK,
                    confirmButtonClass: 'btn btn-success'
                }).then(function () {
                    $(remedyBoxId + " .overlay").show();
                    $('#create-remedy-commentFormId').submit();
                });
            }
        });
    }
}

vm. is knockout.js bound but I am almost completely certain knockout has no part to play in this.

Answer 1

After a lot of poking around, I realised that this needs a polyfill service.

My IE tags were updated to:

@if (Request.Browser.Browser == "IE" || Request.Browser.Browser == "InternetExplorer")
    {
        <script src="https://cdn.polyfill.io/v2/polyfill.min.js"></script>
        <script src="https://npmcdn.com/[email protected]"></script>
    }

Gotta love the 1 line fixes!