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

feat: auto-resize some comment/forum input fields #1630

Merged
merged 6 commits into from
Jul 2, 2023

Conversation

wescopeland
Copy link
Member

This PR makes adjustments to comment textarea fields, new forum topic/reply textarea fields, and outgoing DM textarea fields.

Now, when the user's input expands beyond the field's given height, the field's height will automatically adjust to follow the user input.

Note: I opted not to add this functionality to forum post editing, otherwise it becomes necessary to precalculate the size of the input field on the server.

Autosize.inputs.mp4

@wescopeland
Copy link
Member Author

@Jamiras Conflicts on this PR have been resolved.

@Jamiras
Copy link
Member

Jamiras commented Jul 1, 2023

Minor: field doesn't shrink when deleting lines

Minor: if field extends to bottom of window, the border is offscreen, implying the field is larger than it actually is.
image

This also puts the character counter and submit buttons where they're not immediately usuable.

@wescopeland
Copy link
Member Author

Minor: field doesn't shrink when deleting lines

This should now be resolved.

Additionally, I've added some logic such that if the user opts to manually resize the textarea, the new autoExpandTextInput() function bails (so we're not resizing from what the user manually set the input height to).

Minor: if field extends to bottom of window, the border is offscreen, implying the field is larger than it actually is. image

This also puts the character counter and submit buttons where they're not immediately usuable.

I explored several approaches in an attempt to address this minor issue of the textarea expanding beyond the browser viewport, but couldn't land on a solution that fully fixed it without also causing new issues.

The problem originates from the default browser behavior when dealing with user-initiated resizing of input fields, which I was able to reproduce on both Chromium and macOS Safari. Possible fixes, such as using scrollIntoView() for the submit button upon resizing, caused undesirable side effects like screen jumping. Adding margins or padding to the field to create a scroll offset was also unsuccessful due to the layouts these fields often reside in, such as tables. I am hoping this is enough of a minor issue / edge case that it isn't a showstopper on the change.

@Jamiras Jamiras merged commit b75a09d into RetroAchievements:master Jul 2, 2023
@wescopeland wescopeland deleted the auto-resize-inputs branch July 2, 2023 14:56
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants