fix autoscroll on stateful children

This commit is contained in:
Khaleel Al-Adhami 2025-02-21 14:11:38 -08:00
parent 8943341605
commit 8f56957b04

View File

@ -11,7 +11,9 @@ from reflex.vars.base import Var, get_unique_variable_name
class AutoScroll(Div):
"""A div that automatically scrolls to the bottom when new content is added."""
_memoization_mode = MemoizationMode(disposition=MemoizationDisposition.ALWAYS)
_memoization_mode = MemoizationMode(
disposition=MemoizationDisposition.ALWAYS, recursive=False
)
@classmethod
def create(cls, *children, **props):
@ -44,7 +46,6 @@ class AutoScroll(Div):
"""
ref_name = self.get_ref()
return [
"const containerRef = useRef(null);",
"const wasNearBottom = useRef(false);",
"const hadScrollbar = useRef(false);",
f"""
@ -85,6 +86,8 @@ useEffect(() => {{
const container = {ref_name}.current;
if (!container) return;
scrollToBottomIfNeeded();
// Create ResizeObserver to detect height changes
const resizeObserver = new ResizeObserver(() => {{
scrollToBottomIfNeeded();