TextArea scrollbar and wrapping interaction on initial render is broken

[darrenburns]

The following is an educated guess at the problem spotted by @TomJGooding in #5099 (comment) (includes a video example of the issue)...

When a TextArea has wrapping enabled and is filled with content that results in a scrollbar appearing, it looks like the initial wrap is not accounting for the scrollbar, causing the content to be wrap at scrollbar_width wider than it should be.

When the text area wraps, it does account for scrollbar_width, but it seems like the scrollbar width value hasn't "settled" yet during that initial wrap.

Also important to note is that this is a bit of a chicken and egg scenario - a vertical scrollbar will appear if the height of the content exceeds the TextArea height. We can't know the height of the content until we wrap though, and we can't know the exact width to wrap at unless we know if there's a scrollbar or not.

Adding scrollbar-gutter: stable works around the problem, but it still has a brief flicker when the TextArea first appears where it seems to wrap assuming a width 0 scrollbar.

After moving the cursor, the TextArea is "aware" of the scrollbar and accounts for it.

The code in #5099 includes a TextArea that exhibits this problem.

[TomJGooding]

After spending some time trying to create an MRE for this issue, I'm actually wondering if this is caused by the scrollbar in the parent rather than the TextArea itself?

Here's a simple example where pressing Tab doesn't seem to cause any change in the TextArea content, until you uncomment the additional widget which adds a scrollbar to the parent. (This is a bit tricky to reproduce as of course it depends on the terminal size!)

from textual.app import App, ComposeResult
from textual.widgets import Input, Placeholder, TextArea

LOREM_IPSUM = """\
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla facilisi. Sed euismod, nunc sit amet aliquam lacinia, nisl nisl aliquam nisl, nec aliquam nisl nisl sit amet lorem. Sed euismod, nunc sit amet aliquam lacinia, nisl nisl aliquam nisl, nec aliquam nisl nisl sit amet lorem. Sed euismod, nunc sit amet aliquam lacinia, nisl nisl aliquam nisl, nec aliquam nisl nisl sit amet lorem.

Donec auctor, nisl eget ultricies ultricies, nunc nisl aliquam nisl, nec aliquam nisl nisl sit amet lorem. Sed euismod, nunc sit amet aliquam lacinia, nisl nisl aliquam nisl, nec aliquam nisl nisl sit amet lorem. Sed euismod, nunc sit amet aliquam lacinia, nisl nisl aliquam nisl, nec aliquam nisl nisl sit amet lorem.
"""


class TextAreaBugApp(App[None]):
    CSS = """
    TextArea {
        height: 8;
    }
    """

    def compose(self) -> ComposeResult:
        yield Input(placeholder="Press Tab to focus the TextArea")
        yield TextArea(LOREM_IPSUM)
        # yield Placeholder()


app = TextAreaBugApp()
if __name__ == "__main__":
    app.run()