Skip to content
GitLab
Closed
Issue created by Administrator@rootContributor

'shown' event on modal called before transition completed.

Created by: DataTables

I think this is a duplicate of #5045 (closed), but that issue was closed without a test case being provided and I can't reopen it. Apologies if I should have posted in the closed issue.

I've been hitting a problem in Bootstrap 4 (wasn't able to reproduce the issue in Bootstrap 3) whereby I position an element over a Bootstrap modal when it opens (a date picker for my use case, but it applies to any overlay). I use shown.bs.modal to know when the modal is visible and the transition is complete - the docs say

show.bs.modal | This event fires immediately when the show instance method is called. If caused by a click, the clicked element is available as the relatedTarget property of the event.

However, I've been finding that the shown event triggers before the CSS transition is completed. The test case demonstrates this:

  1. Click the "Launch demo modal" button in the output view (I've just used the docs demo HTML for the modal)
  2. Observe that the blue line is just above the model footer initially.
  3. After a second observe that the blue line is moved to exactly match the top of the modal footer.

I've got a little function that positions the blue bar to where the modal footer position is read. When shown.bs.modal is triggered, this is not the final position of the modal, hence the need for a timeout to shift it to the correct position.

Expected result: The blue bar should be shown exactly at the top of the footer when the CSS transition is completed. It appears that shown.bs.modal is triggering too early.

I should note that in #5045 (closed) it was noted that the fade class is needed for this to work. The modal the HTML I've used has that class and this problem is still present.

Tested with Bootstrap 4.1.0, 4.1.1 and 4.1.3.