5

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!'
        })
    }
})

});

enter image description here

Angelo Ganaden Jr.
  • 160
  • 1
  • 2
  • 9

6 Answers6

17

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');
});
olayiwola odunsi
  • 236
  • 3
  • 6
10

For bootstrap 5,

Declare your modal with data-bs-focus="false"

<div class="modal fade" id="global_modal_fullscreen" data-bs-focus="false" aria-hidden="true" tabindex="-1">
...
Peter
  • 6,509
  • 4
  • 30
  • 34
5

Removing tabindex

Another solution to that situation is to remove the tabindex attribute from the bootstrap modal, that will prevent the sweetAlert2 modal looses the focus.

Csharls
  • 550
  • 8
  • 19
0

For someone running on bootstrap@5.1.3 I solved this by set focus option to false on Modal object. Something like

const containerClaimReqModal = document.getElementById("claim-request-detail-modal");
const claimReqModal = new bootstrap.Modal(containerClaimReqModal,{focus:false});

as docs references https://getbootstrap.com/docs/5.0/components/modal/#options

user1951441
  • 33
  • 4
0

In bootstrap 4:

$.fn.modal.Constructor.prototype._enforceFocus = function() {};
Sunderam Dubey
  • 1
  • 11
  • 20
  • 40
Rehman Ahmad
  • 1
  • 2
0

Encountered untypeable input issue with SweetAlert2 within a Material-UI Dawer in React? Here's a fix:

The problem lies in MUI Drawer/Modal Focus management. To resolve, use the disableEnforceFocus property to drawer/modal. When set to true, it lets the drawer lose focus, making input possible.

However, note this might affect accessibility for screen readers. Proceed thoughtfully.

here is the code snippet -

<Drawer id="drawer" anchor="right" open={true} **disableEnforceFocus**
}}>
    {
    <MyComponent/>//Inside this component i have sweetalert
    }
</Drawer>

I hope same property will resolve issue in case of MUI Modal.

Vineet
  • 1
  • 1