[RFC] fix chat input height for multi-line placeholder #10931
Merged
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Contributor
🎉 Snyk checks have passed. No issues have been found so far.✅ security/snyk check is complete. No issues have been found. (View Details) ✅ license/snyk check is complete. No issues have been found. (View Details) |
Contributor
✅ PR preview is ready!
|
691346f to
df82094
Compare
Contributor
There was a problem hiding this comment.
Pull Request Overview
This PR addresses an issue with multi-line placeholders in the chat input by adjusting the scroll height calculation and adding new e2e tests for validating the updated behavior.
- Refactored the scrollHeight measurement in ChatInput.tsx to better handle multi-line placeholders.
- Added a useLayoutEffect hook that triggers a recalculation when the placeholder changes.
- Introduced new e2e tests in st_chat_input_test.py and updated chat input initialization in st_chat_input.py to validate the fix.
Reviewed Changes
Copilot reviewed 24 out of 24 changed files in this pull request and generated no comments.
| File | Description |
|---|---|
| frontend/lib/src/components/widgets/ChatInput/ChatInput.tsx | Adjusted scrollHeight calculation by removing temporary clearing of the textarea's placeholder and added a useLayoutEffect hook for recalculation when placeholder changes. |
| e2e_playwright/st_chat_input_test.py | Added new tests to capture screenshots for the chat input's behavior with long placeholders. |
| e2e_playwright/st_chat_input.py | Updated chat input instantiation with an extended placeholder to trigger multi-line behavior. |
Comments suppressed due to low confidence (2)
frontend/lib/src/components/widgets/ChatInput/ChatInput.tsx:279
- Ensure that removing the temporary clearing of textarea.placeholder does not lead to inaccurate scrollHeight measurements on browsers other than Chrome/WebKit. Consider adding a code comment referencing the baseweb behavior discrepancy for future maintainers.
scrollHeight = textarea.scrollHeight
e2e_playwright/st_chat_input_test.py:390
- [nitpick] Using nth(5) to select the chat input element may be brittle if the DOM structure changes. Consider using a more specific selector or adding a comment explaining why this index is used.
chat_input = app.get_by_test_id("stChatInput").nth(5)
sfc-gh-bnisco
approved these changes
Mar 28, 2025
Collaborator
sfc-gh-bnisco
left a comment
There was a problem hiding this comment.
LGTM given the tradeoffs talked about in Slack
21f0e39 to
1752a21
Compare
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Describe your changes
See GH issue linked below for context.
In this fix we preserve the scroll height of the input when placeholder expands it to multiple line, and add new e2e tests to validate 3 scenarios.
However, the caveat is that this fix does not work on Firefox. This is because when the placeholder text exceeds the predefined height of the textarea, baseweb increases it scroll height on Chrome and webkit, but not on FIrefox. As a result, when we calculate
scrollHeightingetScrollHeightit returns the height set by its styling.Screen.Recording.2025-03-27.at.11.18.13.AM.mov
I'm currently leaning towards shipping this fix, as I think 1) having this discrepancy has low risk, 2) the existing behavior happens only for edge cases (when there's a reason for long placeholder or short input width,) and 3) any other workaround for this baseweb inconsistency feels hacky and introduces complexity that does not outweigh the gain.
I would appreciate any feedback on how we should go about it.
GitHub Issue Link (if applicable)
#10611
Testing Plan
Contribution License Agreement
By submitting this pull request you agree that all contributions to this project are made under the Apache 2.0 license.