Editor scrolls to bottom when pressing enter in the middle of a big paragraph

[jainp]

When you have a big paragraph and you press enter in the middle, instead of keeping the focus in the middle of the page, the editor scrolls all the way to the bottom.

Steps to reproduce:

1. Go to https://facebook.github.io/draft-js/
2. Copy paste in a large continuous paragraph without any newlines in between.
3. Scroll to the middle of the big paragraph and press enter.
4. The editor will have scrolled to the bottom

This doesn't seem to happen consistently all the time, but I've seen it come up enough times on big paragraphs.

[hellendag]

How many characters in the paragraph?

[jainp]

I tested with about 8000 characters in one paragraph. It generally occurs when the paragraph is big enough that I need to scroll to see all of it. If I scroll to the somewhere in the middle and press enter, that's when the editor scrolls to the bottom.

[hellendag]

Ok, I'll check it out.

What's the use case for an 8000-character paragraph, btw? :)

[jainp]

The 8000 was just to make the bug appear on desktop :). My use case was on
mobile where the paragraph can easily go past the visible screen area (with
much fewer characters) and the auto scrolling to the bottom becomes much
more pronounced.
On Sat, Apr 16, 2016 at 11:25 AM Isaac Salier-Hellendag <
notifications@github.com> wrote:

Ok, I'll check it out.

What's the use case for an 8000-character paragraph, btw? :)

—
You are receiving this because you authored the thread.
Reply to this email directly or view it on GitHub
#304 (comment)

[johanneslumpe]

@jainp @hellendag It doesn't matter what the paragraph length it. This bug occurs when a block is split and the end of the block is outside of the viewport. It can be reproduced by using very little test and just positioning the editor in a way that the paragraph isn't fully visible in the viewport.

[johanneslumpe]

@hellendag unfortunately I have no time right not to investigate this any further, but I've tracked down the issue to this line: https://github.com/facebook/draft-js/blob/master/src/model/transaction/splitBlockInContentState.js#L61

Removing the selection merging gets rid of the scrolling issue but obviously leaves the selection in the previous block. So I assume it has something to do with the way the selection is updated.

// edit
Ok some more digging: https://github.com/facebook/draft-js/blob/master/src/component/selection/setDraftEditorSelection.js#L76
That's where it breaks. Seems like modifying the selection in any way there, no matter whether it's focus or adding points, forces the scrolling change. It doesn't seem to occur with a normal contenteditable element outside of draft when modifying the selection in this way.

[houkanshan]

I think it's this line?

https://github.com/facebook/draft-js/blob/5d5f1b4b89c509d17697965ce9a0d596ed220c43/src/component/contents/DraftEditorBlock.react.js#L103

If the bottom of the focused block is outside of the viewport (scrollDelta > 0), a scrolling will be performed, and the scrolling intend to align the bottom of the block with the bottom of the viewport.

[michelson]

Hi @hellendag ,
I've made a PR #775 that fixes this issue, it fails one test case related on the calculation of scroll , before update that test case I would like to know if you would accept this change. I've tested manually and it works.
This is a really blocking bug in terms of UX imho, I hope we can solve this soon.

best

[michelson]

thinking it twice, maybe it would be a good idea to not calculate scroll deltas at all, and just scroll into the current cursor (the active element) after enter.
Any thoughts ?

[rezaaa]

I have this issue too.
I added a scroll inside editor content and i have the same issue with scroll position.

When do you plan to fix it? @hellendag

[erisnuts]

Is there any progress on this issue. It's really a lot of pain for my team. @hellendag ?

[michelson]

In my Draft integration on my text editor I've added some logic on handleReturn, it's not optimal, but at least improves the UX on this issue.
you can see the solution at: https://github.com/michelson/dante2/blob/master/src/components/dante_editor.js#L574

[hhlevnjak]

Hi, is there any progress on fixing this? It seems this is still an issue in the latest version.