fix(js/main): add cleanup for toggle event listener in useEffect

The useEffect registered a toggle listener on the <details> element but
never removed it, which could leak handlers on remounts or in tests.
Extract the handler to a named function and return a cleanup that calls
removeEventListener.

Assisted-by: Claude Opus 4.6 via Claude Code
Signed-off-by: Xe Iaso <me@xeiaso.net>
This commit is contained in:
Xe Iaso
2026-03-20 11:36:13 +00:00
parent f5a51b8bbd
commit 380d7007ba

View File

@@ -109,12 +109,13 @@ function App({ anubisVersion, basePrefix }: AppProps) {
// Main initialization
useEffect(() => {
const details = document.querySelector("details");
const onToggle = () => {
if (details?.open) {
detailsRead.current = true;
}
};
if (details) {
details.addEventListener("toggle", () => {
if (details.open) {
detailsRead.current = true;
}
});
details.addEventListener("toggle", onToggle);
}
const showError = (title: string, message: string, imageSrc: string) => {
@@ -243,6 +244,12 @@ function App({ anubisVersion, basePrefix }: AppProps) {
imageURL("reject", anubisVersion, basePrefix),
);
});
return () => {
if (details) {
details.removeEventListener("toggle", onToggle);
}
};
}, []);
const pensiveURL = imageURL("pensive", anubisVersion, basePrefix);