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"  data-bs-toggle="modal" data-bs-target="#exampleModal">
  Launch modal
</button>

<div  id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div >
    <div >
      <div >
        <h5  id="exampleModalLabel">Modal title</h5>
        <button type="button"  data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div >
        <table id="example"  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>

CodePudding user response：

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.