usePermission on Safari fails to update

[johnpaulett]

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

• @react-hookz/web version: 23.1.0
• react version: 18.2.0
• react-dom version: 18.2.0
• typescript version: 5.4.5
• OS: MacOS
• Browser: Safari Version 17.4.1 (19618.1.15.11.14)
• Did this work in previous versions? unknown. It works currently in Chrome