Keep compose box scrolled to bottom, not top, as you type a long message

[gnprice]

Since we fixed #3369 with #3595 , the compose box is now scrollable so you can see what you're typing even in the later part of a long message.

But it doesn't automatically scroll itself that way; by default it sticks at the top, and you have to scroll it yourself. See report in chat, with a video.

I'm not sure what the right logic might be for a complicated case where the user is moving to and fro in the message and editing different parts of it. Let's declare the problem of getting that exactly right to be out of scope for this issue.

The most common case is that the user mostly types additional text at the end, and perhaps occasionally scrolls up to edit an earlier part of the message. Let's make that case work such that as long as you're at the end, there's no manual scrolling needed.

[jainkuniya]

This issue is easily reproducible on iOS. On Android it gets automatically scrolled up on typing.

If we revert #3595, then it will get fixed. But then #3369 will occur on Android.

Next will try to find out a simple common solution.

[gnprice]

Thanks @jainkuniya ! Just to make things explicit:

This issue is easily reproducible on iOS. On Android it gets automatically scrolled up on typing.

I believe you're saying this issue doesn't reproduce on Android.

The original user report of the issue was on iOS, so that's consistent too.

[jainkuniya]

This compose box issue is only issue on screen when there are multiple input on the screen, like stream narrow (not topic or PM narrow).

Root cause is: Topic input always try to remain in the window/screen, even when message input expands. So only way left for message input to expand is to expand at bottom, instead of top.

[gnprice]

Root cause is: Topic input always try to remain in the window/screen, even when message input expands. So only way left for message input to expand is to expand at bottom, instead of top.

Ah interesting. Are there particular experiments you've done, or things you've observed, that lead to this diagnosis?

[gnprice]

There were a couple of different attempted fixes in the PR #3690, but they didn't 100% work, and it seems like we don't yet understand the cause of this issue. Let's focus first on investigating the issue, so we can understand what's going on; then once we understand it, we can fix it.

Copying here a version of some of my comments there, as well as more summary of our conversation just now:

For the investigation let's focus on iPhone models without a notch -- so e.g. an iPhone 8 but not an iPhone X. The notch pulls in an unrelated bug (#3066) that causes overlapping symptoms, which confuses the issue.

It looks like the core issue here is that the content input is too tall. In the extreme case the input is too tall for the whole input to be shown at all; in other cases it's itself shown in full, but it crowds out the topic input, or the unreads banner.

The normal way the layout should work is:

• ChatScreen has some height, which it's given by what's outside it. This might be the height of the screen, or the screen minus the keyboard, or we might be in some kind of split-screen or multi-window situation. We shouldn't try to guess about that -- it just gets a height from its parent in the normal way.
• Then some of that height goes to e.g. the navbar, and Chat has a height that's what's left over.
• Then in Chat... something happens in KeyboardAvoider, and maybe that's part of the bug. That'd fit with being iOS-specific, too, because that's basically a no-op on Android.
• After that, UnreadNotice and so on have a height; MessageList and ComposeBox will take the rest. This is what flexbox is for, and in particular the end result should be that ComposeBox effectively has a max height given by the layout of Chat.
• Then inside ComposeBox, again some height goes to the topic input, and what's left is a max height for the content input.

Evidently that's breaking down somewhere. So a key part of the task is to figure out where.

You'll want to investigate the layout of the React components in the app. Try the React debugger; there's documentation in the RN docs on debugging.

[gnprice]

(For cross-reference: we had a very informative chat thread about this here.)