-
Notifications
You must be signed in to change notification settings - Fork 4.3k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Don't limit block initial focus to input fields #12648
Comments
In short: removing the line |
Tested a bit with nested blocks and seems to me things are not so simple. When there are inner blocks, the logic should be adjusted, as right now inner blocks are:
Imagine a block based on inner blocks. The block adds by default two editable fields, for example: Because of 1, removing Also, when adding a second Q/A pair, I'm seeing focus goes to the answer. Expected: focus to go to the first form field / editable i.e. the question. |
Looking a bit more into this, seems the case of nested block is not so simple. Basically, when inserting a block that initially inerts also some nested blocks, This leads to unexpected results that actually depend on which elements are initially inside the parent and the child. For example, when inserting a block that has some default inner blocks: Example 1:
Example 2:
Also, we'd need to remove The desired behavior would be:
|
Would be great if that could be improved. I have the situation that I use multiple |
When inserting a block, if the block has input fields then the initial focus is set by default on the first input field, otherwise it's set on the block wrapper.
See
focusTabbable()
inBlockListBlock
:gutenberg/packages/editor/src/components/block-list/block.js
Lines 141 to 158 in 387bb77
Note: "input fields" in this context are only:
<input>
elements that support the text selection API<textarea>
elementscontenteditable
See
isTextField()
gutenberg/packages/dom/src/dom.js
Lines 435 to 455 in 387bb77
However, the current implementation assumes the first tabbable element is always an "input field". This is true for the Gutenberg default blocks but it's not guaranteed to be true for custom blocks.
For example, what if the first tabbable is a button element?
Initial focus is set on the "input field" after the button, thus skipping an important part of the UI.
Same if the first tabbable element is, for example, one of:
isTextField()
In all these cases, initial focus will be set on the wrong element.
I'd suggest to consider to remove the filtering by
isTextField()
to start with. I don't see a reason for it to be there, unless I'm missing something.Also to consider: a way to give developers more control on initial focus. This could certainly be addressed separately.
The text was updated successfully, but these errors were encountered: