Skip to content
GitLab

Fix backdrop "Cannot read property 'removeChild' of null" when removed from body

Merged Administrator requested to merge github/fork/weaverryan/fix-backdrop-removed-parent into main

Created by: weaverryan

Hi!

This fixes #33946 (closed)

Here is a reproducer: https://weaverryan.github.io/bootstrap-modal-close-reproducer/ Code: https://github.com/weaverryan/bootstrap-modal-close-reproducer/blob/main/index.html#L34-L46

  1. Click "Launch demo modal"
  2. Click "Save changes" in the modal.

Then in the console you'll see:

TypeError: Cannot read property 'removeChild' of null (backdrop.js:119)

This occurs if you hide() a backdrop, but then the HTML of the backdrop is removed from the body while its animation is finishing. From the reproducer:

bootstrap.Modal.getInstance(document.querySelector('#exampleModal')).hide();
document.body.innerHTML = 'Page content changed';

When would this happen? It happens, for example, if you're using Turbo. For example, if you close a modal, then immediately "visit" another page, in reality, that just swaps the body.innerHTML for the page, which causes backdrop to error when it can't find its parent (after the animation).

Please let me know if you need any more clarification or tweaks to the PR :).

Thanks!