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

Let textarea inputs grow dynamically #970

Merged
merged 2 commits into from
Oct 23, 2023

Conversation

owi92
Copy link
Member

@owi92 owi92 commented Oct 23, 2023

Closes #576

Applies to textareas for text block editing and the description textbox on the upload page.

@github-actions github-actions bot temporarily deployed to test-deployment-pr970 October 23, 2023 08:23 Destroyed
Copy link
Member

@LukasKalbertodt LukasKalbertodt left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Neat, thats nice! Though when testing, I noticed that there is still a tiny bit of scrolling for me (in Firefox and Chrome). No idea why.

Comment on lines 46 to 47
textAreaRef.current.style.height = "auto";
textAreaRef.current.style.height = `${e.target.scrollHeight}px`;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Do you set this to auto first to make scrollHeight have the correct value? Like mentioned in this one article? If so, please add a comment, because otherwise the first assignment seems useless.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hm I adapted this solution from this article though I made some adjustments, as I found that some things work differently than described there.
In Tobira's case, the auto thing is needed for another reason than stated there, but it's not useless.
Without it, the height of the textarea decreases by a small amount whenever a single char is deleted, like:

Bildschirmaufnahme.2023-10-23.um.12.34.12.mov

Setting this to auto fixes this, but I don't know how best to explain this in a comment.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The heck? 0.o where is that behavior coming from :D Crazy. Does setting it to 0px also work? Instead of auto? So this seems a bit fishy and maybe worth investigating. But on the other hand, it works now, maybe it's just fine merging?

frontend/src/ui/Input.tsx Show resolved Hide resolved
@github-actions github-actions bot temporarily deployed to test-deployment-pr970 October 23, 2023 11:15 Destroyed
Copy link
Member

@LukasKalbertodt LukasKalbertodt left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Despite some remaining weirdness, we decided to merge. Even in the worst case, the textbox will be usable, so it's safe to merge.

@LukasKalbertodt LukasKalbertodt merged commit b840ca6 into elan-ev:master Oct 23, 2023
2 checks passed
@LukasKalbertodt LukasKalbertodt added the changelog:user User facing changes label Jan 9, 2024
@owi92 owi92 deleted the dynamic-textarea branch March 4, 2024 16:37
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
changelog:user User facing changes
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Textarea with dynamic height
2 participants