Slate: Unexpected scroll when start/end of a block is outside the viewport

[zbeyens]

Do you want to request a _feature_ or report a _bug_?

Bug

What's the current behavior?

https://i.imgur.com/p28xul5.gifv

https://www.slatejs.org/examples/rich-text

Just paste a long paragraph. It scrolls everytime the start or the end of the block is outside the viewport. Scroll target seems to be the middle of the block?

Chrome 78.0.3904.108
Windows 10
Slate v0.50.0

What's the expected behavior?

It should not scroll when the cursor is in the viewport.

[ejoebstl]

Proposed a setting to turn this on/off in #3284.

[ianstormtaylor]

What’s the use case for adding a configuration to turn it off?

[ejoebstl]

To prevent this behavior.

An alternative would be to remove it entirely, but then it could break use cases I'm not aware of.

[ianstormtaylor]

Prevent what behavior? And to what end?

[ejoebstl]

The behavior described in this very issue by the original author.

When a long paragraph which is partly out of the viewport gets selected (for example by triple clicking), the window is scrolled so the paragraph is centered in the viewport. Also, the behavior is not consistent. Sometimes it does scroll, sometimes it does not.

I think this is rather unexpected and I'd like to turn it of, hence this PR.

Hope that helps!

[ianstormtaylor]

Gotcha, yes the current bug of scrolling incorrectly should be fixed.

I don't think that merits adding more configuration to disable scrolling. It should instead be fixed so that it mimics the built-in browser behavior properly.

[thallada]

My 2 cents: I think #3284 is worth merging regardless of the bug or not.

I have implemented my own scrolling logic for the editor that runs onKeyDown and onSelect. It does custom things that most users of Slate probably don't want (e.g. keeps a certain amount of buffer space between the cursor and the edge of the scroll container). But, this broken scrolling is running first and causes the scroll to jump back and forth. With no way to disable the Slate scrolling, I have to fork slate to remove the code.

[gztomas]

I'm experiencing this issue too in a scrollable input using Chrome. Turning off auto-scroll as proposed doesn't seem to improve things in this case:

And this is the current broken behavior with the existing auto-scroll:

I've seen that scrolling is natively handled fine at least in chrome for a <div contenteditable="true" />, wondering what is slate doing that prevents the native behavior.

Sharing https://codesandbox.io/s/slate-scroll-issue-hlwv0 for repro and comparing against the native behavior

[borgar]

I work on a large project that uses Slate and we would love to be able to disable or override the default scrolling via a prop. We have navigation and editing controls that we need to make sure don't obscure the cursor, and we also have very large block elements which have "scrolling focal points" in different areas of the block. Essentially this is similar to what @thallada says above, we require specialized scrolling that the Slate framework will never want.

Also, I may just have filed something that is very related or perhaps a duplicate of this issue: #3576

[CameronAckermanSEL]

Hey @zbeyens, I went to check this out today and I wasn't able to reproduce it, but I'm not exactly sure I was using the right steps. Could you see if this bug still exists on latest examples? I think a PR merged in recently might have fixed it.

[zbeyens]

Hi @CameronAckermanSEL , it looks to be fixed (at least with these STR), thanks!

[gztomas]

It seems that the problem still exists, it can be repro here https://codesandbox.io/s/slate-scroll-issue-hlwv0
Typing in that input will auto-scroll to the middle.
Submitting a PR for it.