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): class AutoScroll(Div):
"""A div that automatically scrolls to the bottom when new content is added.""" """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 @classmethod
def create(cls, *children, **props): def create(cls, *children, **props):
@ -44,7 +46,6 @@ class AutoScroll(Div):
""" """
ref_name = self.get_ref() ref_name = self.get_ref()
return [ return [
"const containerRef = useRef(null);",
"const wasNearBottom = useRef(false);", "const wasNearBottom = useRef(false);",
"const hadScrollbar = useRef(false);", "const hadScrollbar = useRef(false);",
f""" f"""
@ -85,6 +86,8 @@ useEffect(() => {{
const container = {ref_name}.current; const container = {ref_name}.current;
if (!container) return; if (!container) return;
scrollToBottomIfNeeded();
// Create ResizeObserver to detect height changes // Create ResizeObserver to detect height changes
const resizeObserver = new ResizeObserver(() => {{ const resizeObserver = new ResizeObserver(() => {{
scrollToBottomIfNeeded(); scrollToBottomIfNeeded();