CKEditor5 should respect the autofocus attribute of a textarea

Created on 16 December 2024, 5 days ago

Problem/Motivation

Disclaimer: I am not sure if this should be on the Ajax system component or the ckeditor5.module. I looked around, and while there are some issues about focusing elements, none of these were about the autofocus attribute.

The idea is that the textarea FAPI element, supports the attribute autofocus. What happens is that when the page loads, the textarea with the autofocus attribute receives the cursor.

What I would expect is that CKEditor respects this autofocus and receives the cursor.

Steps to reproduce

* Create a node field of type textarea, in one of the bundles (or in a custom form).
* Ensure you have a bunch of fields as well, and move the textarea field lower into the page so that it is not visibly visible on page load.
* Alter the form and add the following in the textarea widget:

          $form['myfieldname']['widget'][0]['#attributes']['autofocus'] = 'autofocus';

* Visit the page
* You will see that the field is focused automatically and the cursor is in the textarea ready to type.
* Alter the field to support the CKEditor5.
* Visit the page again.
* Note, that the page is moved - and if your browser or PC is slow enough, you will notice that it is moved before the CKEditor plugin applies, and when the CKEditor plugin applies, the current is not in the message area.

Now, if you try to also add some AJAX functionality that replaces the field with itself (so reloads it in the DOM mainly), then:
* In the first case, the textarea will autofocus again, and the window will move to show the text area.
* In the second case, the textarea will not focus (or will, but behind the scenes only), the CKEditor will not focus, and the window will not move.

Proposed resolution

Support that the CKEditor respects the autofocus property of the textarea.

Additional notes:

To be fair, I am not a UI expert and I don't work much on JS. I see that if I add the lines

          if (element.hasAttribute('autofocus')) {
            editor.editing.view.focus();
          }

at core/modules/ckeditor5/js/ckeditor5.js:436 then the default mechanism of CKEditor will indeed focus the editor - ready to type - but will not move the viewport (so if the editor is outside the viewport, the curret will end up outside the viewport).
I would need to do something like

          if (element.hasAttribute('autofocus')) {
            editor.editing.view.focus();
            editor.editing.view.scrollToTheSelection();
          }

in order to clone the functionality that the [autofocus] attribute adds by default to the textarea.

πŸ› Bug report
Status

Active

Version

11.1 πŸ”₯

Component

ckeditor5.module

Created by

πŸ‡¬πŸ‡·Greece idimopoulos

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

Merge Requests

Comments & Activities

Production build 0.71.5 2024