Fix useHomeEnd on tabs in mac testing#80374
Conversation
|
Warning: Type of PR label mismatch To merge this PR, it requires exactly 1 label indicating the type of PR. Other labels are optional and not being checked here.
Read more about Type labels in Gutenberg. Don't worry if you don't have the required permissions to add labels; the PR reviewer should be able to help with the task. |
|
The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message. To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook. |
|
Size Change: -4 B (0%) Total Size: 7.73 MB 📦 View Changed
|
|
Thanks @alecgeatches
Observed
Confirms the fix works as intended. Screen.Recording.2026-07-17.at.8.27.22.AM.mov |
What?
Follow-up to #80373 (otherwise independent, but the fixed test is included in this PR to demonstrate the local failure). That PR should get merged first.
While working on that fix, I noticed that the fixed CI test still always failed locally (Mac + Chromium):
Locally the "End" key press in the test was failing to fire, and a new tab was not being created.
Why?
On
trunk, try creating acore/tabsblock, entering a tab title mid-line, and hitting the Home or End keys:home-end-trunk.mov
Above I'm hitting home/end inside of the tab title but nothing happens. In this PR branch, the same test:
home-end-fix.mov
Home and end work properly, and also the test above (which utilizes the End key) passes reliably:
How?
macOS maps Home and End to scroll commands, so it never performs caret movement in editable content. Other platforms bind the keys to the proper home and end movements.
#79105 recently added
use-home-end.js. When the writing flow wrapper is thecontentEditablehost (aneditableRootblock is selected), no browser performs the "correct" movement for home and end. That's specifically addressed in the editing host case, on the assumption that the browser handles everything else. On macOS the browser doesn't handle home and end in the same way, so any editable that holds focus directly (like tab labels) gets no caret movement at all.Replace the wrapper-specific guard with a slightly broader editable content check.
event.target.isContentEditableis true both for the wrapper when it's the editing host and for a nested editable, and false for inputs, textareas, and other focusables, which keep the browser's default behavior.Testing Instructions
trunk, insert acore/tabsblock.fix/use-home-end-tabs). See the caret move appropriately.Automated testing
Run the tab test and see it pass locally on macOS:
Use of AI Tools
Claude for the whole process.