Contrib.social

CKEditor 5: scroll jump after dialog close

Open on Drupal.org →
Created on 22 December 2023, 12 months ago

Problem/Motivation

Attached is a .gif demonstration image.

Steps to reproduce

It can be reproduced only when .ck-tollbar is sticky. So only when the CKE text field is big and the user scrolled down.

Proposed resolution

The reason for this scroll jump is that after the dialog is closed the .ck-button that opened this dialog is focused on. But at that time .ck-toolbar is not sticky anymore so the browser scrolls up to the top of the CKE form element. Scrolling to the focused element is the default behavior. Even though .ck-button 's have the attribute tabindex="-1" they are still considered :focusable by code snippet from dialog.js below.

core/assets/vendor/jquery.ui/ui/widgets/dialog.js line 227
if ( !this.opener.filter( ":focusable" ).trigger( "focus" ).length ) {
Triggers "focus" on the :focusable instances of this.opener. The opener in this context is .ck-button

e.prevetDefault() on $('.ck-button').focus() is not a solution. It fixes the scroll but makes the sticky .ck-tollbar unusable.

The solution that worked was this, even though it's not the best:

Drupal.behaviors.disableCKEditorScroll = {
    attach: function () {

      $(window).on('dialog:afterclose', function () {
        $('.ck-editor__top .ck-button').prop('disabled', false);
      });

      $(window).on('dialog:aftercreate', function () {
        $('.ck-editor__top .ck-button').prop('disabled', true);
      });

    }
  };

By making the button "disabled" we are also making it not :focusable. This is an idea of how to battle this issue.

Maybe it would be better to create a patch that will make the toolbar stay "sticky" even when the dialog is opened. But not sure that this solution is good either.

🐛 Bug report
Status

Active

Version

10.1 ✨

Component
CKEditor 5  →

Last updated about 13 hours ago

Created by

🇺🇸United States edwardsay

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