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>
Topic:
Safari & Web
SubTopic:
General