Input in sweetalert 2 not typeable or cannot be typed on in materializecss modal

I have modal in which when i click add bills button it will popup the sweetalert2, the code provided below came from their documentation, so i think there is no problem with the codes, anyways, my problem is that the input cannot by type-able and it is just like disabled, is this a problemn in materializecss side?

P.s I am using a materializecss css framework, and i also read an article which has the same problem with me in the bootstrap framework.

https://github.com/sweetalert2/sweetalert2/issues/374

    $(".btnAddBills").click(function(event) {  
swal.mixin({
    input: 'text',
    confirmButtonText: 'Next →',
    showCancelButton: true,
    progressSteps: ['1', '2', '3']
}).queue([
{
    title: 'Question 1',
    text: 'Chaining swal2 modals is easy'
},
'Question 2',
'Question 3'
]).then((result) => {
    if (result.value) {
        swal({
            title: 'All done!',
            html:
            'Your answers: <pre><code>' +
            JSON.stringify(result.value) +
            '</code></pre>',
            confirmButtonText: 'Lovely!'
        })
    }
})

});

The Problem The issue is from bootstrap modal accessibility control code which can be found here Modal Accessibility Tab Control, it enforces focus on the Bootstrap modal whenever it loses focus to another element( in this case SweetAlert Modal) in the page.

WorkAround It's as simple as removing the focus event.

For Bootstrap 4 add this code to your JS

$.fn.modal.Constructor.prototype._enforceFocus = function() {};

For Bootstrap 3 add this code to your JS

$('#myModal').on('shown.bs.modal', function() {
    $(document).off('focusin.modal');
});