ai-space/goose
3
0
Fork 0
mirror of https://github.com/aaif-goose/goose.git synced 2026-07-03 14:10:03 +02:00
Code Issues Packages Projects Releases Wiki Activity

Fix scrolling issues and prevent message section interference

Browse Source 
- Add scroll loop prevention in handleTextareaScroll with 1px threshold
- Change visual display from overflow-y-auto to overflow-hidden
- Ensure only textarea controls scrolling behavior
- Prevent visual layer from interfering with parent scroll events
- Maintain auto-scroll functionality while fixing sync issues
This commit is contained in:
spencrmartin
2025-09-25 11:55:02 -04:00
parent d60fbdbb91
commit cd8b860a26
1 changed files with 12 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
ui/desktop/src/components/RichChatInput.tsx
+12 -5
View File
@@ -126,11 +126,19 @@ export const RichChatInput = forwardRef<RichChatInputRef, RichChatInputProps>(({
const [cursorPosition, setCursorPosition] = useState(0);
const [misspelledWords, setMisspelledWords] = useState<{ word: string; start: number; end: number; suggestions: string[] }[]>([]);
// Scroll synchronization
// Scroll synchronization - only sync from textarea to display, not the reverse
const handleTextareaScroll = useCallback(() => {
if (hiddenTextareaRef.current && displayRef.current) {
displayRef.current.scrollTop = hiddenTextareaRef.current.scrollTop;
displayRef.current.scrollLeft = hiddenTextareaRef.current.scrollLeft;
// Prevent infinite scroll loops by checking if sync is needed
const textarea = hiddenTextareaRef.current;
const display = displayRef.current;
if (Math.abs(display.scrollTop - textarea.scrollTop) > 1) {
display.scrollTop = textarea.scrollTop;
}
if (Math.abs(display.scrollLeft - textarea.scrollLeft) > 1) {
display.scrollLeft = textarea.scrollLeft;
}
}
}, []);
@@ -896,7 +904,7 @@ export const RichChatInput = forwardRef<RichChatInputRef, RichChatInputProps>(({
{/* Visual display with action pills, mention pills, spell check, and cursor */}
<div
ref={displayRef}
className={`${className} cursor-text relative overflow-y-auto`}
className={`${className} cursor-text relative overflow-hidden`}
style={{
...style,
minHeight: `${rows * 1.5}em`,
@@ -912,7 +920,6 @@ export const RichChatInput = forwardRef<RichChatInputRef, RichChatInputProps>(({
margin: '0',
whiteSpace: 'pre-wrap', // Match textarea
wordWrap: 'break-word',
scrollBehavior: 'smooth', // Smooth scrolling
}}
role="textbox"
aria-multiline="true"