From aba7fae9a4beb1c6301cce0d2ecd86df26a54784 Mon Sep 17 00:00:00 2001
From: Max Patiiuk <max@patii.uk>
Date: Sat, 1 Jun 2024 18:52:53 -0700
Subject: [PATCH] fix(CalendarsSpy): track calendar visibility change

Fixes #246
---
 .../Contexts/useVisibilityChangeSpy.tsx       | 33 +++++++++++--------
 .../components/Molecules/KeyboardShortcut.tsx |  2 +-
 src/src/utils/events.ts                       |  6 ++--
 3 files changed, 24 insertions(+), 17 deletions(-)

diff --git a/src/src/components/Contexts/useVisibilityChangeSpy.tsx b/src/src/components/Contexts/useVisibilityChangeSpy.tsx
index 64fae7e..1823654 100644
--- a/src/src/components/Contexts/useVisibilityChangeSpy.tsx
+++ b/src/src/components/Contexts/useVisibilityChangeSpy.tsx
@@ -61,19 +61,26 @@ export function useVisibilityChangeSpy(
     () =>
       sideBar === undefined || calendars === undefined
         ? undefined
-        : listen(sideBar, 'click', ({ target }) => {
-            const element = target as HTMLInputElement;
-            if (element.tagName !== 'INPUT' || element.type !== 'checkbox')
-              return;
-            const data = parseCheckbox(calendars, element)?.[0];
-            if (data === undefined) return;
-            const [calendarId, checked] = data;
-            setVisibleCalendars(
-              checked
-                ? visibleCalendarsRef.current?.filter((id) => id !== calendarId)
-                : [...(visibleCalendarsRef.current ?? []), calendarId],
-            );
-          }),
+        : listen(
+            sideBar,
+            'change',
+            ({ target }) => {
+              const element = target as HTMLInputElement;
+              if (element.tagName !== 'INPUT' || element.type !== 'checkbox')
+                return;
+              const data = parseCheckbox(calendars, element);
+              if (data === undefined) return;
+              const [calendarId, isNowChecked] = data;
+              setVisibleCalendars(
+                isNowChecked
+                  ? [...(visibleCalendarsRef.current ?? []), calendarId]
+                  : visibleCalendarsRef.current?.filter(
+                      (id) => id !== calendarId,
+                    ),
+              );
+            },
+            { passive: true },
+          ),
     [sideBar, calendars, setVisibleCalendars],
   );
 }
diff --git a/src/src/components/Molecules/KeyboardShortcut.tsx b/src/src/components/Molecules/KeyboardShortcut.tsx
index a43619c..1a832a4 100644
--- a/src/src/components/Molecules/KeyboardShortcut.tsx
+++ b/src/src/components/Molecules/KeyboardShortcut.tsx
@@ -130,7 +130,7 @@ function SetKeyboardShortcut({
           event.preventDefault();
           event.stopPropagation();
         },
-        true,
+        { capture: true },
       );
     }
     return undefined;
diff --git a/src/src/utils/events.ts b/src/src/utils/events.ts
index 86345c2..3a7d833 100644
--- a/src/src/utils/events.ts
+++ b/src/src/utils/events.ts
@@ -6,17 +6,17 @@ export function listen<EVENT_NAME extends keyof GlobalEventHandlersEventMap>(
   element: EventTarget,
   eventName: EVENT_NAME,
   callback: (event: GlobalEventHandlersEventMap[EVENT_NAME]) => void,
-  catchAll = false,
+  options: AddEventListenerOptions,
 ): () => void {
   element.addEventListener(
     eventName,
     callback as (event: Event) => void,
-    catchAll,
+    options,
   );
   return (): void =>
     element.removeEventListener(
       eventName,
       callback as (event: Event) => void,
-      catchAll,
+      options,
     );
 }