Contrib.social

Using CKEditor 5 inside Bootstrap Modal causes interaction issues

Open on Drupal.org →
Created on 6 June 2023, over 1 year ago
Updated 11 July 2023, over 1 year ago

Problem/Motivation

This issue is pretty specific as it requires a combination of multiple modules, but I figured it may help others to report it anyway. The new CKEditor 5 uses an absolute positioned overlay for their link input. When a CKEditor 5 instance is used inside a Bootstrap Modal, it is not possible to focus the link input as Bootstrap seems to block any focus outside of the modal when it is active.

Steps to reproduce

- Install Drupal with the Bootstrap theme and enable modal bridging
- Install CKEditor 5, Layout Builder and Layout Builder Modal
- When editing a block in Layout Builder that has a CKEditor instance, you will not be able to focus the link input field

Proposed resolution

Use the 'shown.bs.modal' javascript event to move the CKEditor overlay inside the modal so it can be interacted with.

🐛 Bug report
Status

Fixed

Version

3.28

Component

Code

Created by

robbevb

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

Comments & Activities

contrib.social Blog FAQ Discussions
Production build 0.71.5 2024