Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Autosize on the native_textarea doesn't expand to show all content. #1172

Open
jmfk opened this issue Jan 3, 2025 · 2 comments
Open

Autosize on the native_textarea doesn't expand to show all content. #1172

jmfk opened this issue Jan 3, 2025 · 2 comments
Labels
bug Something isn't working

Comments

@jmfk
Copy link

jmfk commented Jan 3, 2025

Describe the bug
Autosize on the native_textarea doesn't expand to show all content.

To Reproduce
Steps to reproduce the behavior:

Create an app with a native_textarea and give it a long text string.

                me.native_textarea(
                    value=<long text>,
                    autosize=True,
                )

Expected behavior
The textarea should expand to show all lines of text not showing vertical scrollbars.

Screenshots
This is three native_textarea, all get a scrollbar. Last one (that I've scrolled half a line) has 4 lines only 3 area visible default.

Image

Desktop System Info

  • OS: MacOS
  • Browser Chrome
  • Version Version 131.0.6778.205 (Official Build) (x86_64)

Additional context
I not that the height of the textarea element gets set automatically, I'm guessing this is an Angular issue?

@jmfk jmfk added the bug Something isn't working label Jan 3, 2025
@richard-to
Copy link
Collaborator

richard-to commented Jan 6, 2025

Quick question. Are you pre-populating with the long text via state? Or are you copy and pasting the long text into the text area?

I've used native textarea with expanding content before and it does work for me. Though I haven't tested out the case of pre-populating a large amount of text via state yet (but I'll give that a try when I get the chance)

Here's my sample snippet, which isn't much different from yours. Most of the additional styles are just to make the textarea look better for my use case.

_STYLE_INVISIBLE_TEXTAREA = me.Style(
  background=me.theme_var("surface-container-lowest"),
  color=me.theme_var("on-surface"),
  overflow_y="hidden",
  width="100%",
  outline="none",
  border=me.Border.all(me.BorderSide(style="none")),
)

me.native_textarea(
  autosize=True,
  min_rows=2,
  style=_STYLE_INVISIBLE_TEXTAREA,
)

You can see an example of the behavior in this demo mesop app: https://huggingface.co/spaces/richard-to/mesop-prompt-tuner

@richard-to
Copy link
Collaborator

Just following up on this. Johan, are you still having issues with this? If so I can look into it further.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

No branches or pull requests

2 participants