From 0500406caabb444cb46a289daf7b3e6f7910fe1c Mon Sep 17 00:00:00 2001 From: Thomas Van Dort Date: Wed, 23 Oct 2024 12:49:18 -0400 Subject: [PATCH 1/2] Handle Safari < 14. https://stackoverflow.com/questions/62693995/addeventlistener-is-not-a-function-for-matchmedia-in-safari-browser/75517985#75517985 --- clients/fides-js/src/lib/hooks/useMediaQuery.ts | 15 +++++++++++++-- 1 file changed, 13 insertions(+), 2 deletions(-) diff --git a/clients/fides-js/src/lib/hooks/useMediaQuery.ts b/clients/fides-js/src/lib/hooks/useMediaQuery.ts index 87e00d6dda..58ce6ae951 100644 --- a/clients/fides-js/src/lib/hooks/useMediaQuery.ts +++ b/clients/fides-js/src/lib/hooks/useMediaQuery.ts @@ -14,9 +14,20 @@ export const useMediaQuery = (query: string) => { function handleChange(e: MediaQueryListEvent) { setMatches(e.matches); } - matchQueryList.addEventListener("change", handleChange); + + if (matchQueryList.addEventListener) { + matchQueryList.addEventListener("change", handleChange); + } else { + // Supports Safari < 14 + matchQueryList.addListener(handleChange); + } return () => { - matchQueryList.removeEventListener("change", handleChange); + if (matchQueryList.removeEventListener) { + matchQueryList.removeEventListener("change", handleChange); + } else { + // Supports Safari < 14 + matchQueryList.removeListener(handleChange); + } }; }, [query]); return matches; From 9320554475b54402bae336aa6adc409485f9e8e3 Mon Sep 17 00:00:00 2001 From: Thomas Van Dort Date: Wed, 23 Oct 2024 14:12:33 -0400 Subject: [PATCH 2/2] Update comment. --- clients/fides-js/src/lib/hooks/useMediaQuery.ts | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/clients/fides-js/src/lib/hooks/useMediaQuery.ts b/clients/fides-js/src/lib/hooks/useMediaQuery.ts index 58ce6ae951..d89aa32e00 100644 --- a/clients/fides-js/src/lib/hooks/useMediaQuery.ts +++ b/clients/fides-js/src/lib/hooks/useMediaQuery.ts @@ -18,14 +18,15 @@ export const useMediaQuery = (query: string) => { if (matchQueryList.addEventListener) { matchQueryList.addEventListener("change", handleChange); } else { - // Supports Safari < 14 + // Older browser and test automation supportSafari < 14 matchQueryList.addListener(handleChange); } + return () => { if (matchQueryList.removeEventListener) { matchQueryList.removeEventListener("change", handleChange); } else { - // Supports Safari < 14 + // Older browser and test automation support matchQueryList.removeListener(handleChange); } };