Duplicate modal

[mastria]

I was having problems with modal duplication. On some screens, I don't need to use Livewire to open a modal, as it's a simple view modal.

When using the native Bootstrap modal, it would create two .modal-backdrop elements. When closing the modal, one of them wouldn't be removed, leaving my application stuck.

The solution was to adjust resources/js/modal.js to avoid importing the modal twice. I'm not sure what the best fix would be.

My solution was this:

//import { Modal } from 'bootstrap';

let modalsElement = document.getElementById('livewire-bootstrap-modal');

modalsElement.addEventListener('hidden.bs.modal', () => {
    Livewire.dispatch('resetModal');
});

Livewire.on('showBootstrapModal', (e) => {
    let modal = bootstrap.Modal.getOrCreateInstance(modalsElement);
    modal.show();
});

Livewire.on('hideModal', () => {
    let modal = bootstrap.Modal.getInstance(modalsElement);
    modal.hide();
    Livewire.dispatch('resetModal');
});

I hope this can help, thank you.

[aliqasemzadeh]

Please provide more information.