Bootstrap show.bs.modal test case – V5.0.1 – Comparisons

Dropdown demo

Collapse demo

Some placeholder content for the collapse component. This panel is hidden by default but revealed when the user activates the relevant trigger.

Popover demo

Offcanvas demo

Offcanvas
Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.

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 V5.0.1 shows event.preventDefault() not working as expected after a modal has been prevented from displaying.

This JS Bin also includes examples of other Bootstrap components (dropdown, collapse, popover, and offcanvas) working as expected:

  • A listener is attached to listen for the show.bs.component event.
  • The checkbox switch setting allows or prevents the component to be displayed:
    • If the checkbox is checked (Component Enabled), the listener does nothing and the component is displayed.
    • If the checkbox is un-checked (Component Disabled), the listener returns event.preventDefault() and nothing is displayed.
  • In Bootstrap V5 (& V4), 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 .
  • In Bootstrap V5 (& V4), re-checking the checkbox (re-enabling) does allow the other components to again be displayed after the component was disabled.

The action of the show buttons can be confirmed through the developer console. As the listeners are sent an event, the listener will log the button and the switch status. For the dropdown, collapse, popover, and offcanvas buttons, the console will log an action every time a button is clicked.

For the modal button, an action will be logged every time the button is clicked, so long as the modal is enabled. Once the switch is changed to disable modals, only one more event will be logged. After that, the modal listener will not be sent any more events.

Edit in JS Bin