Rich text: Scroll position jumps when deleting character when paragraph exceeds height of box

[torjusb]

Describe the bug

If you have a rich text editor, and the paragraph exceeds the height of the editor (so you get a scroll bar), the scroll jumps to the top of the paragraph when you delete characters.

To Reproduce

Steps to reproduce the behavior:

1. Add a long paragraph to a rich text editor which exceeds the height of the box
2. Place the cursor towards the end of the paragraph, ensure that the first line of the paragraph is scrolled out of view
3. Delete a character
4. Observe that the scroll jumps to the top of the paragraph

Expected behavior

Scroll position should remain unchanged

Screenshots

Here is a video showing the bug in action. Bit hard to see what is going on, but I'm simply removing a character with backspace, which scrolls to the top of the paragraph. Then I'm adding a space, which then scrolls down to the cursor position again.

https://github.com/sanity-io/sanity/assets/53583/be2d968a-ba46-4c1f-b6e6-ec99531cb18f

Which versions of Sanity are you using?

3.27.1

What operating system are you using?

MacOS 14. Chrome 120. Firefox 123.

Which versions of Node.js / npm are you running?

v18.17.1

Additional context

I believe the issue is related to the useScrollSelectionIntoView function.

[pedrobonamin]

Hi @torjusb thanks for reporting and all the details added. We can reproduce it internally and the bug has been added to triage, we will keep this issue updated once it's fixed.

[plcdnl]

i had the same problem. Is there a workaround to fix this temporarily ?

[ninaandal]

Hi! A fix for this was included in v3.40.0 ✨ Thanks for reporting!

[github-actions[bot]]

This thread has been automatically locked because it has not had recent activity. Please open a new issue for related bugs and link to relevant comments in this thread.