Scroll-to-cursor is broken inside scrollable containers
See original GitHub issueDo you want to request a feature or report a bug?
bug
What’s the current behavior?
Set the editor to a fixed height and overflow-y: auto
(standard procedure for scrolling content). Press enter several times to exceed this height and the and cursor disappears; a scrollbar appears but the editor does not scroll down. However, if you type a few characters (instead of just creating new lines with 0-1 characters each), the editor suddenly snaps down as expected.
Demo (direct from example page):
Slate JSFiddle with same issue: https://jsfiddle.net/f4150bbq/
This is not reproduceable in a simple JSFiddle with a contenteditable div: https://jsfiddle.net/gz2wrkxz/1/
What’s the expected behavior?
When content exceeds available height, scroll editor down to cursor (i.e., the behavior that happens when you type several characters in the demo above).
I’ve tried my best to figure out the cause of this, but I’m coming up short- could there be a problem with scrollToSelection
? Seeing the expected behavior when typing several characters is also interesting; are we accidentally overriding some default browser behavior?
Mac OS 10.12.3, Chrome 60.0.3112.101, Slate current
Issue Analytics
- State:
- Created 6 years ago
- Comments:18 (9 by maintainers)
Top GitHub Comments
Either way, this is still something that would be nice to fix in core. Since the current behavior seems obviously wrong. If someone wants to make a PR I’d be happy to have this fixed. Thanks!
I’d like to add my 2¢ by saying that scrolling logic should probably be a separate plugin.
Not sure if this is possible to implement with the way Slate operates now, however, scrolling behaviour is not universal for all types of applications. For example, focusing on void blocks (i.e. an image) may make sense in some cases to have the view scroll to the top edge of the block, and in others, to the bottom edge; and in some cases no scrolling is desired at all. Another case is a textfield with a limited input that requires no scrolling, which could make Slate component a lot lighter if it isn’t requiring additional logic. Finally, there may be apps that prefer smooth scrolling or other clever methods.