From 739408738444f860d1bf5f4e676298d1bac9225e Mon Sep 17 00:00:00 2001
From: mattpieterse <63480247+mattpieterse@users.noreply.github.com>
Date: Mon, 6 Oct 2025 18:21:29 +0200
Subject: [PATCH] feat: add window event listener to close the letter stats
 indicator popup when typing in the practice page

resolves #503
---
 packages/page-practice/lib/practice/Indicators.tsx | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/packages/page-practice/lib/practice/Indicators.tsx b/packages/page-practice/lib/practice/Indicators.tsx
index 3a643c62..65a7019d 100644
--- a/packages/page-practice/lib/practice/Indicators.tsx
+++ b/packages/page-practice/lib/practice/Indicators.tsx
@@ -8,7 +8,7 @@ import {
   names,
   StreakListRow,
 } from "@keybr/lesson-ui";
-import { Popup, Portal } from "@keybr/widget";
+import { Popup, Portal, useWindowEvent } from "@keybr/widget";
 import { memo, type ReactNode, useEffect, useState } from "react";
 import * as styles from "./Indicators.module.less";
 import { KeyExtendedDetails } from "./KeyExtendedDetails.tsx";
@@ -26,6 +26,14 @@ export const Indicators = memo(function Indicators({
     | { type: "visible-out"; key: LessonKey; elem: Element }
   >;
   const [state, setState] = useState<State>({ type: "hidden" });
+  useWindowEvent("keydown", (e: KeyboardEvent) => {
+    const isKeyPrintable = e.key.length === 1;
+    const isPopupVisible =
+      state.type === "visible" || state.type === "visible-in";
+    if (isKeyPrintable && isPopupVisible) {
+      setState({ type: "hidden" });
+    }
+  });
   useEffect(() => {
     const tasks = new Tasks();
     switch (state.type) {