When the touchstart event is added on the Document - on click of the dropdown the options box opens and closes immediately, thus restricting user to make any selections
We are able to reproduce this issue on iOS14 : iPad 5th Generation, iOS 14.6 version with the code snippet below
Note : The dropdown works fine when the touchstart event is disabled and this issue is specific to iOS14, works well on iOS13.
<!DOCTYPE html>
<html>
<body onload="addEvents()">
<h1>The select element</h1>
<p>The select element is used to create a drop-down list.</p>
<form action="/action_page.php">
<label for="cars">Choose a car:</label>
<select name="cars" id="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
<br><br>
<input type="submit" value="Submit">
</form>
<p>Click the "Submit" button and the form-data will be sent to a page on the
server called "action_page.php".</p>
<script>
function touchHandler(event) {
var touches = event.changedTouches, first = touches[0], type = "";
switch (event.type) {
case "touchstart":
type = "mousedown";
break;
case "touchmove":
type = "mousemove";
break;
case "touchend":
type = "mouseup";
break;
default:
return;
}
if(document.getElementById("searchContainer") === null || document.getElementById("searchContainer").style.display === "none"){
var simulatedEvent = document.createEvent("MouseEvent");
simulatedEvent.initMouseEvent(type, true, true, window, 1, first.screenX,
first.screenY, first.clientX, first.clientY, false, false, false,
false, 0/*left*/, null);
first.target.dispatchEvent(simulatedEvent);
//event.preventDefault();
}
}
function addEvents(){
document.addEventListener("touchstart", touchHandler, true);
document.addEventListener("touchmove", touchHandler, true);
document.addEventListener("touchend", touchHandler, true);
document.addEventListener("touchcancel", touchHandler, true);
}
</script>
</body>
</html>
As in this code snippet, onload we are adding touchstart event to the Document and the containing form has the dropdown. On click of the dropdown, we are unable to make selections as the dropdown options box gets closed immediately.
Please assess this and let us know if this is a bug on your side and when the possible correction for this can be expected?
Also, can you please update on the below ticket, The issue is still reproducible on the latest iOS version. This was accepted as a bug on your side - please share updates on this as well. https://developer.apple.com/forums/thread/671827?login=true&page=1#658436022