Arrow keys won't move to next paragraph until after scrolling down

[ithinkandicode]

Description

If you have your cursor in a paragraph, and there are other paragraphs below it, you can press the down arrow key to move the cursor pointer down the paragraph, but it stops at that paragraph if it's at the bottom edge of the window. You have to use the mousewheel/scrollbar to move the view down, then it lets you press down again to move to the next paragraph.

Step-by-step reproduction instructions

1. Make a page with lots of long paragraphs with ~10 lines each. Make sure many of them are below the visible window area.
2. Scroll to the top, and click to place the cursor pointer inside
3. Press the down arrow key as many times as you can
4. Eventually your cursor pointer will hit the bottom of the visible edge, and pressing down won't scroll down to the next paragraph (which is currently hidden), despite one being there

Screenshots, screen recording, code snippet

Environment info

WP Version: 6.0.2
Theme: Twenty Twenty-Two (v1.2)

Please confirm that you have searched existing issues in the repo.

Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

Yes

[amustaque97]

I'm able to reproduce the error. Attaching a screencast for reference.

Screen.Recording.2022-09-12.at.12.20.02.AM.mov

In the video, I"m using an input capturing tool to display me pressing the "down" button

Text shown in the screencast

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque posuere enim mauris. Quisque laoreet scelerisque elit sit amet luctus. Aenean tempor ut enim et dapibus. Sed imperdiet non ipsum id mattis. Aliquam tincidunt nisl eget lorem hendrerit, eu dapibus tortor vestibulum. Duis rutrum, lacus placerat mattis condimentum, felis nunc venenatis libero, eu dapibus nunc turpis at lacus. Quisque in feugiat justo. Nulla imperdiet, orci ac luctus scelerisque, dui est viverra orci, nec consequat justo augue at massa. Phasellus sed consectetur ipsum. Proin egestas purus magna, ut facilisis libero egestas a. Proin ut nisi vitae odio ultricies consequat ut sit amet augue. Phasellus ultricies id tellus eget tincidunt. Aenean quis faucibus risus. Fusce pellentesque eu arcu quis auctor. Etiam rutrum quis nibh in tempor. Nam efficitur lacus in nulla faucibus, at consequat est vehicula.

Nulla facilisi. Aenean eget finibus justo. Morbi non iaculis nisl, eget pharetra augue. Aliquam justo libero, tempus a eleifend eu, venenatis sed nisi. Fusce tincidunt enim quis diam commodo hendrerit. Curabitur scelerisque nisi vel sollicitudin congue. Aliquam in cursus dui. Nunc in massa tellus. Pellentesque mattis erat velit, vel mollis libero rutrum et. Mauris auctor quis lacus a porta. Integer nec hendrerit nibh. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Sed suscipit ornare massa a aliquet.

Vivamus commodo ex nec massa sollicitudin cursus. Suspendisse a ante quis ex efficitur cursus. Curabitur vitae blandit lorem. Quisque blandit est ut ligula condimentum, in ullamcorper nibh porta. Pellentesque imperdiet nulla sit amet aliquam porta. Duis nec lorem finibus, finibus lacus ut, auctor neque. In ornare nec nibh sit amet varius. Nulla cursus faucibus dolor quis ultrices. Donec a ex arcu. Cras sit amet vulputate mauris. Integer ac tellus id lectus feugiat interdum. Aliquam posuere consectetur dictum.

Aenean eu cursus lacus. Maecenas mollis suscipit massa. In hac habitasse platea dictumst. Nulla facilisi. Cras a pellentesque dolor. In rhoncus vehicula tortor, id vestibulum turpis lobortis nec. Morbi lobortis a ex a mattis. Nulla ornare varius orci in tempor. Nullam mauris nulla, interdum vel aliquet aliquam, congue quis est. Maecenas diam velit, mollis et lorem non, blandit efficitur enim. Ut faucibus varius ligula, at ullamcorper dolor feugiat sed. Quisque tincidunt massa et lacus pretium gravida. Sed vel ornare sapien, imperdiet ullamcorper risus.

Donec et hendrerit nisi. Pellentesque vel justo mi. In hac habitasse platea dictumst. Praesent iaculis odio at libero dapibus sodales. Integer enim eros, accumsan eget tellus et, consequat hendrerit enim. Nunc elementum at risus ut volutpat. Quisque ipsum ex, scelerisque a elementum et, posuere ac lectus.

Curabitur dictum purus augue, ut tempor felis pulvinar eu. Vestibulum nec odio pharetra, lacinia nisi dictum, convallis nibh. Vivamus feugiat fringilla nunc, vel vestibulum nulla congue id. Nulla facilisi. Phasellus consequat erat sed lectus maximus, non tincidunt lectus posuere. Phasellus tincidunt ornare ipsum. Etiam et ante ac erat scelerisque venenatis id eu orci. Nunc sodales neque sed consectetur vulputate.

[ithinkandicode]

Thanks for looking at this @amustaque97 .

Another few issues, I'm raising them here as they're related to keyboard navigation and scroll position. (Should these be added as separate issues?)

• PageUp/PageDown don't work as expected, they only move up/down a short distance
• An issue with pressing up:
  • If there's a paragraph above the one with the cursor pointer, and that paragraph is mostly hidden in the window, then pressing up while the cursor is in the paragraph below will jolt the scroll position right up (rather than the cursor moving up and the scroll position staying the same, as expected).
  • The cursor will be in the right place, but the scroll position changing means you mentally lose your position, making it difficult to write articles longer than a few paragraphs if you use arrow keys.
• Using Ctrl+Z sends the scroll position all over the place. It seems like using it not only restores the deletion you just made, but it also move the cursor to wherever it was before the deletion.
  • So if your cursor is, say, in the middle of one paragraph, then you scroll up, highlight a word, delete it, then press Ctrl+Z, it will whisk you back down to the aforementioned paragraph (as well as triggering the other issues related to scroll position).
  • This makes it very hard to see what deletion has been restored, and feels like the WP editor is wrestling control away from the writer.
  • To see this, just make a few paragraphs (enough for at least 2x the height of the editor window), and in the middle of the middle one, add random characters in 2 different places, then press Ctrl+Z. The scroll position will change both times, even though the current scroll position is perfect.

I think that at least one of the causes of these issues is that the editor seems to always be trying to make the line cursor is on roughly 8 lines down from the top of the editor window. This is easiest to see this with the Ctrl+Z issue (#3 above).

[t-hamano]

Hi @ithinkandicode,

Thank you for submitting the Issue.

I would like to address this issue as well, but I think we should focus on one discussion in one issue. Regarding the list of issues you mentioned, it might be better to submit another issue if it does not already exist.

[t-hamano]

I found that this problem also occurs with the up arrow key. When a block is adjacent to a vertical edge, the cursor doesn't move to the previous block.

Perhaps this is related to the passage:

gutenberg/packages/block-editor/src/components/writing-flow/use-arrow-nav.js

Line 262 in 7f3993f

isVerticalEdge( target, isReverse ) &&

[t-hamano]

I was able to identify that this API returns incorrect values only when the block is adjacent to the vertical edge.

gutenberg/packages/dom/src/dom/caret-range-from-point.js

Line 15 in e86b550

return doc.caretRangeFromPoint( x, y );

However, I have not been able to find the cause of the problem, so hopefully someone more knowledgeable about this issue will look into it.

[draganescu]

I hit this bug recently multiple times.

[ellatrix]

Are you all using Safari?

[draganescu]

I use Firefox and Safari on osx.