Poster: fix being re-focused after window regain focus

sbondCo · Oct 3, 2024 · ed9a9aa · ed9a9aa
1 parent 48814c2
commit ed9a9aa
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 2 deletions.
diff --git a/src/lib/poster/GamePoster.svelte b/src/lib/poster/GamePoster.svelte
@@ -139,7 +139,23 @@
       posterActive = false;
     }
   }}
-  on:mouseleave={() => (posterActive = false)}
+  on:mouseleave={() => {
+    posterActive = false;
+    const ae = document.activeElement;
+    if (
+      ae &&
+      ae instanceof HTMLElement &&
+      (ae.parentElement?.id === "ilikemoviessueme" ||
+        ae.parentElement?.parentElement?.id === "ilikemoviessueme")
+    ) {
+      // Stops the poster being re-focused after the browser window
+      // loses focus, then regains it (ex: you middle click the poster,
+      // go to the opened tab (or lose browser window focus, then when
+      // you come back the poster is sent `focusin` and stuck activated
+      // until mouseleave again).
+      ae.blur();
+    }
+  }}
   on:click={() => (posterActive = true)}
   on:keyup={(e) => {
     if (e.key === "Tab") {

diff --git a/src/lib/poster/Poster.svelte b/src/lib/poster/Poster.svelte
@@ -111,7 +111,23 @@
       posterActive = false;
     }
   }}
-  on:mouseleave={() => (posterActive = false)}
+  on:mouseleave={() => {
+    posterActive = false;
+    const ae = document.activeElement;
+    if (
+      ae &&
+      ae instanceof HTMLElement &&
+      (ae.parentElement?.id === "ilikemoviessueme" ||
+        ae.parentElement?.parentElement?.id === "ilikemoviessueme")
+    ) {
+      // Stops the poster being re-focused after the browser window
+      // loses focus, then regains it (ex: you middle click the poster,
+      // go to the opened tab (or lose browser window focus, then when
+      // you come back the poster is sent `focusin` and stuck activated
+      // until mouseleave again).
+      ae.blur();
+    }
+  }}
   on:click={() => (posterActive = true)}
   on:keyup={(e) => {
     if (e.key === "Tab") {