fix(CalendarsSpy): track calendar visibility change

Fixes #246

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],
  );
 }

src/src/components/Molecules/KeyboardShortcut.tsx

@@ -130,7 +130,7 @@ function SetKeyboardShortcut({
  event.preventDefault();
  event.stopPropagation();
  },
- true,
+ { capture: true },
  );
  }
  return undefined;

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,
  );
 }