From 2cde28ca703d6bc12857a478435ceaad0b6501cf Mon Sep 17 00:00:00 2001
From: Niklas Korz <niklas@niklaskorz.de>
Date: Mon, 11 Sep 2023 11:30:15 +0200
Subject: [PATCH] Fix focus group registration for math equation editor

---
 apps/example/src/App.svelte                   |  2 ++
 .../src/py/projections/EquationEditor.svelte  | 32 ++++++++++++++++---
 2 files changed, 30 insertions(+), 4 deletions(-)

diff --git a/apps/example/src/App.svelte b/apps/example/src/App.svelte
index cde5bfc..1e19835 100644
--- a/apps/example/src/App.svelte
+++ b/apps/example/src/App.svelte
@@ -15,9 +15,11 @@
 
 <main>
   <ul class="tab-list">
+    <!-- svelte-ignore a11y-click-events-have-key-events -->
     <li class={activeTab === "ts" ? "active" : ""} on:click={selectTypescript}>
       TypeScript
     </li>
+    <!-- svelte-ignore a11y-click-events-have-key-events -->
     <li class={activeTab === "py" ? "active" : ""} on:click={selectPython}>
       Python
     </li>
diff --git a/apps/example/src/py/projections/EquationEditor.svelte b/apps/example/src/py/projections/EquationEditor.svelte
index aee6564..7c1d8db 100644
--- a/apps/example/src/py/projections/EquationEditor.svelte
+++ b/apps/example/src/py/projections/EquationEditor.svelte
@@ -16,6 +16,7 @@
   export let focusGroup: FocusGroup | null = null;
 
   let target: HTMLElement;
+  let activeFocusGroup: FocusGroup | null = null;
 
   MathfieldElement.fontsDirectory =
     "https://unpkg.com/mathlive@0.95.5/dist/fonts";
@@ -49,6 +50,16 @@
         break;
     }
   });
+  mfe.addEventListener("focus-out", (e) => {
+    switch (e.detail.direction) {
+      case "forward":
+        focusGroup.next(mfe);
+        break;
+      case "backward":
+        focusGroup.previous(mfe);
+        break;
+    }
+  });
 
   onMount(() => {
     target.appendChild(mfe);
@@ -60,14 +71,27 @@
     };
   });
 
-  $: if (mfe && focusGroup) {
+  function registerInFocusGroup(focusGroup: FocusGroup) {
+    unregisterFromActiveFocusGroup();
     focusGroup.registerElement(mfe);
+    activeFocusGroup = focusGroup;
   }
 
-  onDestroy(() => {
-    if (mfe && focusGroup) {
-      focusGroup.unregisterElement(mfe);
+  function unregisterFromActiveFocusGroup() {
+    if (activeFocusGroup) {
+      activeFocusGroup.unregisterElement(mfe);
+      activeFocusGroup = null;
     }
+  }
+
+  $: if (focusGroup) {
+    registerInFocusGroup(focusGroup);
+  } else {
+    unregisterFromActiveFocusGroup();
+  }
+
+  onDestroy(() => {
+    unregisterFromActiveFocusGroup();
   });
 </script>
 
-- 
2.51.2