From c61620c8dc7300fd6b1e4f377e29934be6ebfb92 Mon Sep 17 00:00:00 2001 From: Joel Date: Thu, 16 Apr 2026 13:01:11 -0700 Subject: [PATCH] fix(json tree): update toggle to be controlled --- ui/components/dev-panel-sources/index.tsx | 15 ++++++++++++++- 1 file changed, 14 insertions(+), 1 deletion(-) diff --git a/ui/components/dev-panel-sources/index.tsx b/ui/components/dev-panel-sources/index.tsx index aa4a2d0..6968012 100644 --- a/ui/components/dev-panel-sources/index.tsx +++ b/ui/components/dev-panel-sources/index.tsx @@ -1,6 +1,6 @@ import style from "./style.module.css" -import { useRef, useState } from "react" +import { useEffect, useRef, useState } from "react" import { JsonNode } from "../dev-panel-tree" import { SOURCE_TTL_MS, @@ -171,15 +171,28 @@ function SourceRow({ const cardRef = useRef(null) const [treeExpanded, setTreeExpanded] = useState(false) + const programmaticToggle = useRef(false) const toggleTree = () => { const next = !treeExpanded + programmaticToggle.current = true cardRef.current?.querySelectorAll("details").forEach((d) => { d.open = next }) + programmaticToggle.current = false setTreeExpanded(next) } + useEffect(() => { + const card = cardRef.current + if (!card) return + const reset = () => { + if (!programmaticToggle.current) setTreeExpanded(false) + } + card.addEventListener("toggle", reset, true) + return () => card.removeEventListener("toggle", reset, true) + }, []) + const dataEntries = data !== undefined && typeof data === "object" && data !== null ? Object.entries(data as Record)