iOS Safari - Input element is unre… | Apple Developer Forums

iOS Safari - Input element is unresponsive when modifying DOM via a touch event (touchstart, touchmove, touchend, etc)

This is a really strange issue on iOS Safari. Under certain conditions a basic input element will not be focusable or show the on screen keyboard. I can reproduce the issue with a very simple HTML file by dynamically adding an anchor element with an href during a touch event. If you add a different element or an anchor without an href, there is no issue. Similarly, if you apply the same listener to a click event there is no issue.

Reproducible in iOS Simulator 17.2 and 18.1

This HTML/JS showcases the problem:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>InputIssue</title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
  </head>
  <body>
    <div id="parent">
      <input type="text" name="test" />
      <div id="child"></div>
    </div>
    <script>
      document.addEventListener("touchstart", () => {
        const child = document.getElementById("child");
        if (!child) return;
        while (child.firstChild) {
          child.removeChild(child.firstChild);
        }
        const link = document.createElement("a");
        link.href = "https://test.com";
        link.textContent = "test";
        child.appendChild(link);
      });
    </script>
  </body>
</html>