kripod/react-hooks

[useMedia | usePreferredColorScheme] Not working on Safari

Davide-Gheri opened this issue · 3 comments

Davide-Gheri commented

Description

The useMedia (and usePreferredColorScheme, since it uses useMedia) hook doesn't work on Safari, either MacOS and iOS.
This is because the MediaQueryList interface on Safari doesn't inherit any methods from EventTarget, and because of that not exposing addEventListener and removeEventListener methods.

Since the util managedEventListener is used widely in the library, I think we should create a new specific function to handle this "edge" case, that just checks if target.addListener / target.removeListener are functions and call them instead of add/removeEventListener

Reproduction

use useMedia hook on Safari, the console should log:
TypeError: target.addEventListener is not a function. (In 'target.addEventListener(type, callback, options)', 'target.addEventListener' is undefined)

Environment

System:

  • OS: macOS Mojave 10.14.4
  • CPU: (8) x64 Intel(R) Core(TM) i7-4770HQ CPU @ 2.20GHz
  • Memory: 35.11 MB / 16.00 GB
  • Shell: 5.3 - /bin/zsh

Binaries:

  • Node: 10.16.3 - ~/.nvm/versions/node/v10.16.3/bin/node
  • Yarn: 1.17.3 - /usr/local/bin/yarn
  • npm: 6.9.0 - ~/.nvm/versions/node/v10.16.3/bin/npm
  • Watchman: 4.9.0 - /usr/local/bin/watchman

Browsers:

  • Chrome: 77.0.3865.120
  • Firefox: 69.0.3
  • Safari: 12.1

npmPackages:

  • react: ^16.9.0 => 16.10.2
  • web-api-hooks: ^2.0.0 => 2.0.0
kripod commented

Thank you for reporting! This has been resolved in web-api-hooks@2.0.1.

  • 🚀1