Modal "hidden" event is firing while the modal is still visible

[ghost]

Prerequisites

• I have searched for duplicate or closed issues
• I have validated any HTML to avoid common problems
• I have read the contributing guidelines

Describe the issue

It appears that "hidden.bs.modal" events are raised on modals before the modal is actually hidden. I have created a simple repro at JSFiddle, linked below. This code creates a modal, listens for "hidden.bs.modal" events and shows an alert when the event is received. The alert appears and the modal is still visible underneath.

Reduced test cases

https://jsfiddle.net/om8d0swb/

What operating system(s) are you seeing the problem on?

Windows

What browser(s) are you seeing the problem on?

Chrome, Microsoft Edge

What version of Bootstrap are you using?

5.1.3

[chirag3003]

@kc-jeffk everything is working as it should .
When the event you are using is triggered, first the function passed in the event listener is executed then the actual process is executed . So when the modal close event is triggered your alert function is executed first the the modal close function is triggered .

[ghost]

Hello, @chirag3003.

It sounds like you are describing the "hide.bs.modal" event, not the "hidden.bs.modal" event. The second is what the code is listening for. According to the documentation for the "hidden.bs.modal" event, "This event is fired when the modal has finished being hidden from the user (will wait for CSS transitions to complete)." Perhaps there is some nuance about what it means to complete a transition that I do not understand, but the documentation does not seem to match the behavior.

Thanks.

[florianlacreuse]

In order to get the CSS transitions, you need to add .fade on .modal, see the live demo.

Your example fixed: https://codepen.io/florianlacreuse/pen/YzrLROE

[ghost]

So, the hidden event is raised after the modal is actually hidden if and only if there is a transition. Without a transition, it is raised before the modal is hidden, and this is the expected behavior. TBH, I find the inconsistency confusing. But if this is the way it's supposed to work, so be it.

[florianlacreuse]

I'm just trying to help about fade and transition, may be you should re-open rhe issue and wait for an official response from a member of the BS team?

[ghost]

Sure, I can do that. This isn't a big issue for me, just confusing and, as you both said, easily worked around by using transitions.