Bootstrap 5 Modal issues

[tahirafridi]

I've problems, when I show modal and someone click the delete button, there I'm showing sweetalert confirmation dialogue. It asks for confirmation or cancel, no matter which button you click, then it show the disabled dark screen and nothing else. is there any work around or it is the bug? why my bootstrap modal closed but not properly with this alert dialog?

See in the pictures, after clicking any button on dialog it shows the grey background disabled screen.

below is my code to show modal

window.addEventListener('showManageCollectionsModal', event => {
            var modal = new bootstrap.Modal(document.querySelector('#manage_collection_modal'), {
                keyboard: false
            });

            modal.show();
});

[jantinnerezo]

I see the parent of the confirmation dialog is a bootstrap 5 modal, I haven't tried it yet with css libraries that has built-in components like modals. This is more likely an issue with SweetAlert2 library itself but can you try adding tabindex="-1" to your bootstrap modal?

[tahirafridi]

tabindex="-1" already there, but somewhere I read that if I remove it, it will resolve the issue, but no luck so far.

[jantinnerezo]

So weird, did you provide callbacks for onConfirmed and onCancelled and register the callbacks as event listeners in your livewire component?

[tahirafridi]

Yes all done as in your document, everything works perfectly, except, if I click the ok/cancel button after the alert confirmation it just show me the dulled screen with slightly grey overlay colour. and none of the html elements active, I have to refresh the whole page to see the or click the html elements.

[jantinnerezo]

Did the parent modal closed first when you hit the delete and shows the confirmation dialog? or just right after you finally click yes or no?

[tahirafridi]

No I'm not closing the main modal, because in my main modal there is table and list of collections, there is 'edit' and 'delete' buttons in the modal inside html table. So if someone click delete button, I'm showing them sweetalert dialogue , he/she click delete or cancel, it should say thank you and close the sweetalert but I don't want to close the main modal, because its not a good user experience to close the main modal without their intention and then if they want to edit or delete another collection, they need to again click the show collections modal.

[tahirafridi]

Right now sweetalert is trying to close the modal, but it doesn't close properly and it leave something behind, thats why the screen still keep disabled.

[jantinnerezo]

Yeah agree with that, since you trigger opening the modal with Javascript not with Livewire public states, did you try adding wire:ignore this might be dom sniffing issues but I might be wrong with that, you can check if there's any log errors on dev console when you hit confirm or cancel.

[tahirafridi]

Yeah thanks for the hints, yes it works but with 'wire:ignore.self' without .self it showing me the main modal as empty table no records there. But if i put .self with ignore it working perfectly. Thanks!

[jantinnerezo]

Glad you make it work and found a workaround, let me know if you still have some issue.