search

react-hookz / web

React hooks done right, for browser and SSR.
https://react-hookz.github.io/web/
MIT License
1.93k stars 94 forks source link

usePermission on Safari fails to update #1563

Open johnpaulett opened 2 weeks ago

johnpaulett commented 2 weeks ago

What is the current behavior?

usePermission works on Chrome, but not Safari. Seems like root issue is in Safari not firing change event: https://forums.developer.apple.com/forums/thread/757353

I'm documenting this here in case someone else runs into it and partly to see if anyone has an idea for a workaround.

Steps to Reproduce

  const permission = usePermission({ name: "microphone" });

  const prompt = useCallback(async () => {
    try {
      await navigator.mediaDevices.getUserMedia({ audio: true });
    } catch (promptError) {
      console.warn("Microphone prompt error", promptError);

      if (promptError instanceof DOMException) {
        setError(promptError);
      }
    }
  }, []);

  // Prompt on first mount if permissions have not yet been granted or denied.
  useEffect(() => {
    if (permission === "prompt") {
      prompt();
    }
  }, [permission]);

permission is prompt and never updated on Safari, even though re-querying shows it was granted

navigator.permissions
    .query({ name: "microphone" })
    .then((result) => console.log(result.status));
// logs "granted"

Have tried to adjust the on call to use onchange = handleChange, but that did nothing.

What is the expected behavior?

Seems like it is Safari not firing onchange, ideally Safari would fix. But is there a workaround for react-hookz? Perhaps if Safari, provide a setInterval check?

Environment Details