Bug: setState is not flushed if an iframe is added in the same tick in Safari

[kh-viewar]

Batched state changes are not flushed if the promise code changes the DOM (= attaching an iframe). Reproduceable with Safari.

React version: 18.1.0

Steps To Reproduce

1. Open codepen with Safari.
2. Click "Upload"
3. => "Spinner" text does not render while Promise is in pending

Link to code example:

https://codepen.io/kh-viewar/pen/wvpVLxM

The current behavior

State changes are not executed.

The expected behavior

State should change to true and render spinner component. After promise is resolved (2 seconds timeout), state should switch back to false and spinner component should unmount.

Original discussion

#24365

[gaearon]

I suspect this might be #22459 (comment) showing its head again. Can you check the issue repros in desktop Safari as well?

[kh-viewar]

I suspect this might be #22459 (comment) showing its head again. Can you check the issue repros in desktop Safari as well?

Yes, same on Safari Desktop. Will update issue description.

€: Also reproduceable with @next version.

[gaearon]

Minimal repro.

function App() {
  const [count, setCount] = React.useState(0);

  return (
    <button onClick={() => {
      setCount(c => c + 1);
      document.body.appendChild(document.createElement("iframe"));
    }}>
      {count}
    </button>
  );
};

const rootElement = document.getElementById("app");
const root = ReactDOM.createRoot(rootElement);
root.render(<App />);

Only repros in Safari and only when served over http(s).