2

I am using React 18, with iOS 15.6.1 Safari, navigator.clipboard.writeText API sended an error:

NotAllowedError: The request is not allowed by the user agent or the platform in the current context, possibly because the user denied permission.

export default function App() {
  const [text, setText] = useState("");

  const copy = () => {
    fetch("https://api.paugram.com/acgm")
      .then((res) => {
        return res.json();
      })
      .then((res) => {
        console.log(res);

        setText(res.title);

        if (navigator.clipboard) {
          navigator.clipboard.writeText(res.title).catch((e) => {
            console.log("Error", e);
          });
        }
      });
  };

  const noPromiseCopy = () => {
    if (navigator.clipboard) {
      navigator.clipboard.writeText("Simple text content").catch((e) => {
        console.log("Error", e);
      });
    }
  };

  return (
    <div className="App">
      <p>{text}</p>
      <button onClick={copy}>Copy</button>
      <button onClick={noPromiseCopy}>noPromiseCopy</button>
    </div>
  );
}

Click the "Copy" and "noPromiseCopy" buttons, it works in M1 Mac's Chrome. but in iOS Safari, "Copy" runs failed.

Reproduction Demo link

Why?

I tried to writing this with original JavaScript, it still works in iOS Safari, Is this an react bug?

Dreamer-Paul
  • 21
  • 2
  • Does this answer your question? [Javascript / Clipboard API / Safari iOS / NotAllowedError Message](https://stackoverflow.com/questions/62327358/javascript-clipboard-api-safari-ios-notallowederror-message) – Binit Dec 13 '22 at 05:17

0 Answers0