[useMediaQuery] Fix crash in Safari < 14 and IE 11 (#29776)

mui · Nov 20, 2021 · fb9808c · fb9808c
1 parent 14db5d5
commit fb9808c
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 6 deletions.
diff --git a/packages/mui-material/src/useMediaQuery/useMediaQuery.test.js b/packages/mui-material/src/useMediaQuery/useMediaQuery.test.js
@@ -22,10 +22,11 @@ function createMatchMedia(width, ref) {
       matches: mediaQuery.match(query, {
         width,
       }),
-      addEventListener: (type, listener) => {
+      // Mocking matchMedia in Safari < 14 where MediaQueryList doesn't inherit from EventTarget
+      addListener: (listener) => {
         listeners.push(listener);
       },
-      removeEventListener: (type, listener) => {
+      removeListener: (listener) => {
         const index = listeners.indexOf(listener);
         if (index > -1) {
           listeners.splice(index, 1);

diff --git a/packages/mui-material/src/useMediaQuery/useMediaQuery.ts b/packages/mui-material/src/useMediaQuery/useMediaQuery.ts
@@ -75,10 +75,11 @@ function useMediaQueryOld(
       }
     };
     updateMatch();
-    queryList.addEventListener('change', updateMatch);
+    // TODO: Use `addEventListener` once support for Safari < 14 is dropped
+    queryList.addListener(updateMatch);
     return () => {
       active = false;
-      queryList.removeEventListener('change', updateMatch);
+      queryList.removeListener(updateMatch);
     };
   }, [query, matchMedia, supportMatchMedia]);
 
@@ -109,9 +110,10 @@ function useMediaQueryNew(
     return [
       () => mediaQueryList.matches,
       (notify: () => void) => {
-        mediaQueryList.addEventListener('change', notify);
+        // TODO: Use `addEventListener` once support for Safari < 14 is dropped
+        mediaQueryList.addListener(notify);
         return () => {
-          mediaQueryList.removeEventListener('change', notify);
+          mediaQueryList.removeListener(notify);
         };
       },
     ];