Bootstrap show.bs.modal test case – V4.6.0

Modal demo

Bootstrap Issue — supporting test case

Issue: Modal event.preventDefault() for show.bs.modal: disables modal with fade class from being displayed again in V4 & V5.

The JavaScript for Bootstrap V4 & V5 stops a modal from being displayed again, once displaying the modal has been prevented using event.preventDefault().

This JS Bin using Bootstrap V4.6.0 shows event.preventDefault() not working as expected after a modal has been prevented from displaying:

  • A listener is attached to listen for the show.bs.modal event.
  • The checkbox switch setting allows or prevents the modal to be displayed:
    • If the checkbox is checked (Modal Enabled), the listener does nothing and the modal is displayed.
    • If the checkbox is un-checked (Modal Disabled), the listener returns event.preventDefault() and nothing is displayed.
  • In Bootstrap V4 (& V5), re-checking the checkbox (re-enabling) should allow the modal to again be displayed after the modal was disabled, but this is not the case .

The action of the modal button can be confirmed through the developer console. As the listener is sent an event, the listener will log the button and the switch status. An action will be logged every time the button is clicked, so long as the switch is set to enabled. Once the switch is changed to disabled, only one more event will be logged. After that, the modal listener will not be sent any more events.

To step through the Bootstrap code, a breakpoint can be placed at line 103 in the V4.6.0 modal.js file (the show(relatedTarget) function).

Edit in JS Bin