refactor(chat-messages): use CdkTextareaAutosize for chat input#2112
refactor(chat-messages): use CdkTextareaAutosize for chat input#2112chintankavathia wants to merge 1 commit into
Conversation
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
This pull request refactors the chat input component to use Angular CDK's CdkTextareaAutosize directive for dynamic height adjustment, successfully removing custom height calculation logic. Feedback highlights a potential issue where the CDK directive's inline overflow-y: hidden style could prevent scrolling if the 30vh CSS height limit is reached before the 8-row limit; using overflow-y: auto !important; is recommended to resolve this.
Replace the hand-rolled textarea auto-resize logic in SiChatInputComponent with Angular CDK's CdkTextareaAutosize directive (cdkAutosizeMinRows="1", cdkAutosizeMaxRows="8"). The 30vh viewport cap is preserved via CSS (max-block-size + overflow-y: auto) instead of JS. Removes setTextareaHeight/adjustTextareaHeight and the (input) handler; behavior (min 1 row, max 8 rows, capped at 30% viewport) is unchanged.
chintankavathia
force-pushed
the
refactor/ai/chat-input/textarea-auto-size
branch
from
d1d59f5 to
9561d5d
Compare
spike-rabbit
left a comment
spike-rabbit
left a comment
There was a problem hiding this comment.
something seems to wrong. It now always has a scrollbar, even if the height is not exceeded
seems like specific to firefox with our special fonts. our fonts are not honoring actual line-heights so even when having line height 16px firefox considers fonts to require 17px height causing textarea to have 17px scrollHeight but cdk calculate height based on the line height. |
yeah...known issue. that's why we e.g. force the height in input here https://github.com/siemens/element/blob/main/projects/element-theme/src/styles/bootstrap/forms/_form-control.scss#L118 |
3 participants
Replace the hand-rolled textarea auto-resize logic in SiChatInputComponent with Angular CDK's CdkTextareaAutosize directive (cdkAutosizeMinRows="1", cdkAutosizeMaxRows="8"). The 30vh viewport cap is preserved via CSS (max-block-size + overflow-y: auto) instead of JS.
Removes setTextareaHeight/adjustTextareaHeight and the (input) handler; behavior (min 1 row, max 8 rows, capped at 30% viewport) is unchanged.
Documentation.
Examples.
Dashboards Demo.
Playwright report.
Coverage Reports: