iOS_Safari_window_open_issue.tsx

import { useEffect, useState, useRef } from "react";
const ProxyButton = ({ time = 0 }: { time?: number }) => {
  const open = () => {
    setTimeout(() => {
      document.dispatchEvent(
        new CustomEvent("customOpen", {
          detail: { url: "https://www.google.com" },
        }),
      );
    }, time);
  };

  useEffect(() => {
    document.addEventListener("customOpen", (e) => {
      window.open(e.detail.url, "_blank");
    });
  }, []);

  return <button onClick={open}>Proxy Open</button>;
};

const StateButton = ({ time = 0 }: { time?: number }) => {
  const [config, setConfig] = useState<{ url: string } | null>(null);

  const open = () => {
    setTimeout(() => {
      setConfig({ url: "https://www.google.com" });
    }, time);
  };

  useEffect(() => {
    if (config) {
      window.open(config.url, "_blank");
    }
  }, [config]);

  return <button onClick={open}>State Open</button>;
};

const HideButton = ({ time = 0 }: { time?: number }) => {
  const btnRef = useRef<HTMLButtonElement>(null);

  const open = () => {
    setTimeout(() => {
      btnRef.current?.click();
    }, time);
  };

  const hideOpen = () => {
    window.open("https://www.google.com", "_blank");
  };

  return (
    <>
      <button style={{ display: "none" }} ref={btnRef} onClick={hideOpen}>
        State Open
      </button>
      <button onClick={open}>Hide Open</button>
    </>
  );
};

function App() {
  const time = 0;

  return (
    <div>
      <ProxyButton time={time} />
      <br />
      <StateButton time={time} />
      <br />
      <HideButton time={time} />
    </div>
  );
}

export default App;