Why does Bootstrap 5.2.1 cause modal to hide when paging Datatable?

Question

I have a datatable inside a bootstrap v5.2.1 modal. When I open the modal and try to page through the data, the modal immediately hides itself. This does not happen with bootstrap v5.2.0.

Why does this happen?

Demos of datatables within bootstrap modals:

BS v5.2.0 demo

BS v5.2.1 demo

Snippet of BS v.5.2.1 code with the issue:

$(document).ready(function() {

  $('#example').DataTable({
    scrollY: "40vh",
    scrollCollapse: true,
    scroller: true,
    responsive: true
  });

  $(document).on('shown.bs.modal', '#modal', function() {
    $($.fn.dataTable.tables(true)).DataTable()
      .columns.adjust()
      .responsive.recalc()
      .scroller.measure();
  });

  $('#exampleModal').on('hide.bs.modal hidden.bs.modal', function(e) {
    //console.log(e);
  });

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.21/js/jquery.dataTables.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/datatables.net-bs5/1.12.1/dataTables.bootstrap5.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/datatables.net-bs5/1.12.1/dataTables.bootstrap5.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.2.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.2.1/js/bootstrap.bundle.min.js"></script>


<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
  Launch modal
</button>

<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <table id="example" class="table table-striped table-bordered table-hovered" cellspacing="0" width="100%">
          <thead>
            <tr>
              <th>Name</th>
              <th>Email</th>
              <th>Role</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>1</td>
              <td>[email protected]</td>
              <td>User</td>
            </tr>
            <tr>
              <td>2</td>
              <td>[email protected]</td>
              <td>Admin</td>
            </tr>
            <tr>
              <td>1</td>
              <td>[email protected]</td>
              <td>User</td>
            </tr>
            <tr>
              <td>2</td>
              <td>[email protected]</td>
              <td>Admin</td>
            </tr>
            <tr>
              <td>1</td>
              <td>[email protected]</td>
              <td>User</td>
            </tr>
            <tr>
              <td>2</td>
              <td>[email protected]</td>
              <td>Admin</td>
            </tr>
            <tr>
              <td>1</td>
              <td>[email protected]</td>
              <td>User</td>
            </tr>
            <tr>
              <td>2</td>
              <td>[email protected]</td>
              <td>Admin</td>
            </tr>
            <tr>
              <td>1</td>
              <td>[email protected]</td>
              <td>User</td>
            </tr>
            <tr>
              <td>2</td>
              <td>[email protected]</td>
              <td>Admin</td>
            </tr>
            <tr>
              <td>1</td>
              <td>[email protected]</td>
              <td>User</td>
            </tr>
            <tr>
              <td>2</td>
              <td>[email protected]</td>
              <td>Admin</td>
            </tr>
            <tr>
              <td>1</td>
              <td>[email protected]</td>
              <td>User</td>
            </tr>
            <tr>
              <td>2</td>
              <td>[email protected]</td>
              <td>Admin</td>
            </tr>
            <tr>
              <td>1</td>
              <td>[email protected]</td>
              <td>User</td>
            </tr>
            <tr>
              <td>2</td>
              <td>[email protected]</td>
              <td>Admin</td>
            </tr>
            <tr>
              <td>1</td>
              <td>[email protected]</td>
              <td>User</td>
            </tr>
            <tr>
              <td>2</td>
              <td>[email protected]</td>
              <td>Admin</td>
            </tr>
            <tr>
              <td>1</td>
              <td>[email protected]</td>
              <td>User</td>
            </tr>
            <tr>
              <td>2</td>
              <td>[email protected]</td>
              <td>Admin</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>

Answer 1

There's an issue with this bootstrap version and the modal (github). It resolved in this pull request but not yet released. In the meantime you can go back to version 5.2.0.