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.