diff --git a/packages/mui-material/src/useMediaQuery/useMediaQuery.test.js b/packages/mui-material/src/useMediaQuery/useMediaQuery.test.js index 3ed1a94f5d762d..082f4ea33dc847 100644 --- 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 index eefd057dbdcf0a..bd77ff672f70cb 100644 --- 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); }; }, ];