Contrib.social

CKEditor 5: scroll jump after dialog close

Open on Drupal.org →
Created on 22 December 2023, 9 months ago
Updated 21 March 2024, 6 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:aftercreate', function () {
        $('.ck-editor__top .ck-button').prop('disabled', true);
      });

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

    }
  };

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

Needs work

Version

11.0 🔥

Component
CKEditor 5  →

Last updated about 1 hour ago

Created by

🇺🇦Ukraine edwardsay

Live updates comments and jobs are added and updated live.
  • Needs tests

    The change is currently missing an automated test that fails when run with the original code, and succeeds when the bug has been fixed.

  • Accessibility

    It affects the ability of people with disabilities or special needs (such as blindness or color-blindness) to use Drupal.

  • Needs manual testing

    The change/bugfix cannot be fully demonstrated by automated testing, and thus requires manual testing in a variety of environments.

  • Needs accessibility review

    Used to alert the accessibility topic maintainer(s) that an issue significantly affects (or has the potential to affect) the accessibility of Drupal, and their signoff is needed (see the governance policy draft for more information). Useful links: Drupal's accessibility standards, the Drupal Core accessibility gate.

  • JavaScript

    Affects the content, performance, or handling of Javascript.

Sign in to follow issues

Comments & Activities

contrib.social Blog FAQ Discussions
Production build 0.71.5 2024