Contrib.social

CKEditor 5: scroll jump after dialog close

Open on Drupal.org →
Created on 22 December 2023, over 1 year 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 1 hour ago

Created by

🇺🇸United States edwardsay

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

Comments & Activities

  • Issue created by @edwardsay
  • Comment over 1 year ago →
    🇺🇸United States edwardsay
  • Status changed to Postponed: needs info about 1 year ago
  • Comment about 1 year ago →
    🇧🇪Belgium wim leers Ghent 🇧🇪🇪🇺

    Thanks for taking the time to report this in detail, @edwardsay! 😊

    Please check #3415961-6: [drupalMedia] Using the Insert Media button causes the window to scroll to the bottom of the page → — can you apply a similar one-line change to the https://www.drupal.org/project/ckeditor_templates → module you demonstrated in the GIF (thanks!) to check if that fixes the problem? 🙏

  • Comment about 1 year ago →
    🇺🇸United States edwardsay

    Thank you Wim Leers.

    Unfortunately, the fix from https://www.drupal.org/comment/15443030#comment-15443030 → does not resolve the issue related to the jQuery focus event, triggered on the CKE buttons.

    This "jump issue" can be reproduced not only in CKE-Templates dialogs, but all dialogs.

  • Status changed to Needs work about 1 year ago
  • Comment about 1 year ago →
    🇺🇸United States edwardsay

    Even the closing of the dialog triggers the refocus and scroll. A new GIF is attached.

  • First commit to issue fork.
  • Comment 29 days ago →
    davidhk

    We've used the workaround described at the top of this page, and now there is no scrolling up after inserting a media item into the text. That is a big improvement, thank you to @edwardsay

    The workaround has introduced another problem though, as after inserting media the CKE toolbar is now hidden (I think due to the focus leaving the CKE text area). When the user clicks into the CKE text area to continue editing, the CKE toolbar displays again. This repeated hide / display of the toolbar is distracting to the user, so it'll be good to find a way to stop it from happening. (It did not happen when we used D9.5.9+CKE4.)

    Can CKE's 'Link' button give any clues to a solution? After using it to add a link to text, the page doesn't scroll and the CKE toolbar isn't hidden. An extra advantage is that after using the Link button the focus remains in the CKE text area, so that a user can immediately continue typing without having to click into the CKE text area first.

    Background: We hit this problem while upgrading our site from D9 to D10. We have over 30,000 photos on our site and users often use the 'Insert Media' button when editing pages or comments. This 'scroll up' bug first appeared when, in preparation for the upgrade, we switched our D9.5.9 site from using CKEditor 4 to CKE5.

    Then we upgraded core from D9.5.9 to D10.2.2, which introduced the 'scroll down' bug described in issue 3415961, [drupalMedia] Using the Insert Media button causes the window to scroll to the bottom of the page 🐛 [drupalMedia] Using the Insert Media button causes the window to scroll to the bottom of the page Needs work . We fixed it by applying patch #5 from that issue, but that meant this issue's bug resurfaced, and so after inserting media the page scrolled up again.

contrib.social Blog FAQ Discussions
Production build 0.71.5 2024