[FIXED] How can I get an onclick function to run before Bootstrap 5's 'hidden' event?

Issue

We have a modal popup that has a button with an onclick event. When the modal is hidden, in previous version of bootstrap, the onclick event fired first and then the hidden.bs.modal event would fire.

In 5.2 the hidden.bs.modal event fires first, and then the onclick event is processed.

Example:

<div>
  <button id="yes" type="button" onclick="SetVariableValue();" data-bs-dismiss="modal">YES</button>
</div>

javascript code:

popup.on('hidden.bs.modal', function (e) {
    //do work that depends on _memberLevelVariable.cancelled value
    DoWork();
}

...

function SetVariableValue()
{
   _memberLevelVariable.cancelled = true;
}

If I put a breakpoint on both DoWork and SetVariableValue, in bootstrap 3.x I see SetVariableValue hit first then DoWork. In bootstrap 5.2, DoWork is hit first and then SetVariableValue.

This breaks code we have that depends on _memberLevelVariable value, because in 5.2 it will be processed after the DoWork method, instead of before.

Is there a setting that can control this order of operations? I did not see any information in the bootstrap specifications that controlled this or mentioned this change.

const popupEl = document.getElementById('myModal');
const popup = new bootstrap.Modal(popupEl);

popup.show();

popupEl.addEventListener('hidden.bs.modal', event => {
  DoWork();
  console.log('hiding modal now');
});

function DoWork() {
  console.log('doing work now');
}

function SetVariableValue() {
  console.log('setting variable value now');
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">

<div id="myModal" class="modal" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Modal title</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body"></div>
      <div class="modal-footer">
        <button id="yes" class="btn" type="button" onclick="SetVariableValue();" data-bs-dismiss="modal">YES</button>
      </div>
    </div>
  </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>

Solution

You could use the classic no-delay setTimeout trick. This moves the internal function call to the end of the processing queue, which would seem to resolve your issue.

const popupEl = document.getElementById('myModal');
const popup = new bootstrap.Modal(popupEl);

popup.show();

popupEl.addEventListener('hide.bs.modal', event => {
  setTimeout(DoWork);

  console.log('hiding modal now');
});

function DoWork() {
  console.log('doing work now');
}

function SetVariableValue() {
  console.log('setting variable value now');
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">

<div id="myModal" class="modal" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Modal title</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body"></div>
      <div class="modal-footer">
        <button id="yes" class="btn" type="button" data-bs-dismiss="modal" onClick="SetVariableValue()">YES</button>
      </div>
    </div>
  </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>

Answered By - isherwood

Answer Checked By - Mary Flores (PHPFixing Volunteer)