If bootstrap 5 is chosen, the dismiss buttons do not work + disabling "close with the keyboard / backdrop" is not possible

Created on 13 December 2022, over 1 year ago
Updated 29 July 2023, 11 months ago

Problem/Motivation

Bootstrap 5 has different attribute names for the modal options:

  • data-dismiss --> data-bs-dismiss
  • data-keyboard --> data-bs-keyboard
  • data-backdrop --> data-bs-backdrop

However, the modal-page-modal.twig.html always uses the bs3 names, so dismiss buttons don't work and changing the keyboard / the backdrop configurations has no effect when using bs5.

Steps to reproduce

  1. Go to /admin/config/user-interface/modal-page/settings and select Bootstrap 5 in the version dropdown.
  2. Go to /admin/structure/modal and edit a modal
  3. On the Modal buttons tab, check "Display button X to close"
  4. On the Modal close tab, uncheck both "Close Modal pressing ESC key" and "Close Modal clicking outside the Modal" options.

Result:

The modal will show properly, but:

  • The X button will not close the modal
  • The overlay background will close the modal (the default bs5 behaviour)
  • Pressing ESC will close the modal (the default bs5 behaviour)
πŸ› Bug report
Status

Fixed

Version

5.0

Component

Code

Created by

πŸ‡ͺπŸ‡ΈSpain ruthcj

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

Not all content is available!

It's likely this issue predates Contrib.social: some issue and comment data are missing.

Production build 0.69.0 2024