Personalisation modal doesn't close correctly

[steveWinter]

After setting the desired columns in the personalisation modal and clicking Apply a POST request is made to refresh the table, and while the modal itself is removed the mask remains in place preventing further interaction with the page.

[Kreyu]

Hey! Thanks for your time!

I remember this case - it isn't exactly related to the data table bundle, but it's the Stimulus itself, used in combination with Bootstrap modals. In my projects, I'm using a following logic in the assets/app.js:

document.addEventListener('turbo:submit-end', () => {
    if (document.body.classList.contains('modal-open')) {
        document.querySelector('.modal-backdrop').remove();
    }
});

which works fine in my case (and for other modals in the app), but I know there are other ways to handle this (for example https://symfonycasts.com/screencast/turbo/modal-frame-close).

I would like to handle this error in the bundle itself, but for now, I have no idea how to do it properly :( In the meantime, I suggest applying the fix to the application, this will fix both the personalization modal and other modals (outside of the bundle).

[Shotman]

Hey! Thanks for your time!

I remember this case - it isn't exactly related to the data table bundle, but it's the Stimulus itself, used in combination with Bootstrap modals. In my projects, I'm using a following logic in the assets/app.js:

document.addEventListener('turbo:submit-end', () => {
    if (document.body.classList.contains('modal-open')) {
        document.querySelector('.modal-backdrop').remove();
    }
});

which works fine in my case (and for other modals in the app), but I know there are other ways to handle this (for example https://symfonycasts.com/screencast/turbo/modal-frame-close).

I would like to handle this error in the bundle itself, but for now, I have no idea how to do it properly :( In the meantime, I suggest applying the fix to the application, this will fix both the personalization modal and other modals (outside of the bundle).

Just came across that and the snipet isn't perfect because you can't scroll the page after because of some css on the body style attribute adding fixes everything :
document.body.attributes.removeNamedItem('style');

[Kreyu]

Well, after some tinkering I found out, that I can fix this problem in the personalization Stimulus controller, by closing the Bootstrap modal programmatically (and it works great). Unfortunately, the same issue affects the action confirmation modal, which doesn't have its own Stimulus controller.

[Kreyu]

I've added this issue to the documentation troubleshooting section. I believe applications encountering this error will also have a problem with other (non-bundle) modals, and this should be fixed outside of the bundle.

On the other hand, fixing this in the bundle would require adding a Stimulus controller specific for modals, to ensure those are closed properly. Unfortunately, those controllers would be tied to the Bootstrap directly, making them less suitable for the bundle.

For now, I'm closing this issue, with reason explained above. If anyone has an idea on how to prevent this issue, I'd be happy to hear that, and I'll reopen the issue.

Cheers!