Only add a media query event listener where supported (#1387)

* Only add a media query event listener where supported * Fall back to media.addListener if possible * Changeset * Changeset patch -> minor * Update .changeset/tasty-humans-carry.md Co-authored-by: Cole Bemis <colebemis@github.com>
primer · Aug 25, 2021 · 6b4d52d · 6b4d52d
1 parent 8ee008d
commit 6b4d52d
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 4 deletions.
diff --git a/.changeset/tasty-humans-carry.md b/.changeset/tasty-humans-carry.md
@@ -0,0 +1,5 @@
+---
+'@primer/components': patch
+---
+
+Guard against MediaQueryList.addEventListener calls where unavailable and possibly fall back to .addListener
diff --git a/src/ThemeProvider.tsx b/src/ThemeProvider.tsx
@@ -108,11 +108,21 @@ function useSystemColorMode() {
     }
 
     // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
-    media?.addEventListener('change', handleChange)
-
-    return function cleanup() {
+    if (media) {
+      // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+      if (media.addEventListener !== undefined) {
+        media.addEventListener('change', handleChange)
+        return function cleanup() {
+          media.removeEventListener('change', handleChange)
+        }
+      }
       // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
-      media?.removeEventListener('change', handleChange)
+      else if (media.addListener !== undefined) {
+        media.addListener(handleChange)
+        return function cleanup() {
+          media.removeListener(handleChange)
+        }
+      }
     }
   }, [])