Improve height reset logic for proper shrinking after text deletion

- Reset height constraints on both textarea and display layers
- Force reflow on both elements to ensure accurate measurement
- Reset display content constraints to prevent stale minHeight values
- Enhanced logging to track height synchronization behavior
This commit is contained in:
spencrmartin
2025-09-25 13:24:01 -04:00
parent 6f2d81397a
commit e7ff2bcbb4
+22 -3
View File
@@ -151,8 +151,21 @@ export const RichChatInput = forwardRef<RichChatInputRef, RichChatInputProps>(({
textarea.style.minHeight = 'auto';
textarea.style.maxHeight = 'none';
// Also reset display constraints
display.style.height = 'auto';
display.style.minHeight = 'auto';
display.style.maxHeight = 'none';
// Reset display content constraints too
const displayContent = display.firstElementChild as HTMLElement;
if (displayContent) {
displayContent.style.minHeight = 'auto';
displayContent.style.height = 'auto';
}
// Force a reflow to ensure the browser recalculates dimensions
textarea.offsetHeight;
display.offsetHeight;
const textareaScrollHeight = textarea.scrollHeight;
@@ -178,10 +191,13 @@ export const RichChatInput = forwardRef<RichChatInputRef, RichChatInputProps>(({
// Force the display layer to have the same scrollable content area
// This ensures that when the textarea scrolls, the display can show the same content
const displayContent = display.firstElementChild as HTMLElement;
if (displayContent) {
// Make sure the content area matches the textarea's scroll height
displayContent.style.minHeight = `${textareaScrollHeight}px`;
// Only set minHeight if content is taller than the container, otherwise let it be natural
if (textareaScrollHeight > finalHeight) {
displayContent.style.minHeight = `${textareaScrollHeight}px`;
} else {
displayContent.style.minHeight = 'auto';
}
}
// Sync scroll positions
@@ -189,10 +205,13 @@ export const RichChatInput = forwardRef<RichChatInputRef, RichChatInputProps>(({
display.scrollLeft = textarea.scrollLeft;
console.log('🔄 SYNC HEIGHT:', {
value: textarea.value,
valueLength: textarea.value.length,
textareaScrollHeight,
desiredHeight,
finalHeight,
maxHeight,
minHeight,
scrollTop: textarea.scrollTop,
textareaHeight: textarea.style.height,
displayHeight: display.style.height,