Post not yet marked as solved
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
Post not yet marked as solved
Hello Team,
The issue was already reported using https://developer.apple.com/forums/thread/671827?login=true&page=1#658436022
Seems like this ticket is CLOSED as i might have accepted a reply to the post unknowingly.
Please refer the comments on earlier post as well and provide resolution.
BELOW IS THE CLEAR DETAILS ON THE ISSUE :
We are seeing some issues with the XSLT transformation with iOS14 version(starting 14.1 version) and this was working fine in earlier versions.
Issue : When an XSLT transformation is done using transformToDocument, we are observing that the anchor tag has the href attribute removed. Please refer to below example.
Sample usage :
new XSLTProcessor().importStylesheet(xsl_file)).transformToDocument(newParsedXML)
Sample line from XSL file :
<td><a href="javascript:alert(1)"><xsl:value-of select="catalog/cd/address"/></a></td>
Expected :
<a href="javascript:alert(1)">Bangalore</a>
Actual :
<a>Bangalore</a>
The UX is broken due to this as the links are no longer clickable with the href attribute being removed.
However, when the href contains the link(as below) - this works as expected.
Sample line from XSL file :
<td><a href="https://www.google.com"><xsl:value-of select="catalog/cd/artist"/></a></td>
Expected :
<a href="https://www.google.com">ArtistName</a>
Actual :
<a href="https://www.google.com">ArtistName</a>
Any help on this would be very much appreciated. Looking forward for a quick response
I have enclosed the sample HTML and the XSL file for reference.
HTML :
<!doctype html>
<html>
<head>
			<meta charset="utf-8">
			<title>Test XSLT Transformation</title>
			<h1>SAMPLE HTML PAGE</h1>
</head>
<body>
<button onclick="doTransform()">Click for XSLT Transformation</button>
<div class="add-info" style="display: none;">
<br>
	 <h3> Transformed XML Document : </h3>	<span id="disp-div"></span>
</div>
<script>
function doTransform() {
	 //Create the XML
var sampleXML = "<?xml version=\"1.0\" encoding=\"UTF-8\"?><catalog><cd><title>Test Title</title><artist>CLICK ME!</artist><address>Bangalore</address></cd></catalog>";
var parser = new DOMParser();
var xml_file = parser.parseFromString(sampleXML, "text/xml");
//Load the XSLT file
var response = getData("../../../assets/xslt/emxSampleXSL.xsl");
var dom = document.implementation.createDocument("", "", null);
	 // dom.loadXML(response);
		var objDOMParser = new DOMParser();
		var objDoc = objDOMParser.parseFromString(response, "text/xml");
while (dom.hasChildNodes())
		dom.removeChild(dom.lastChild);
		for (var i=0; i < objDoc.childNodes.length; i++) {
				var objImportedNode = dom.importNode(objDoc.childNodes[i], true);
				dom.appendChild(objImportedNode);
		}
//Create XSLT Processor
var xslProcess = new XSLTProcessor();
xslProcess.importStylesheet(dom);
//Transform the sample XML with the XSLT
var transformedXML = xslProcess.transformToDocument(xml_file);
console.log("---transformedXML---> "+transformedXML);
document.getElementsByClassName('add-info')[0].style.display = 'inline';
document.getElementById('disp-div').innerHTML = new XMLSerializer().serializeToString(transformedXML);
}
function getData(sPath, fnCallback){
var objHTTP = new XMLHttpRequest;
objHTTP.open("get", sPath, fnCallback != null);
objHTTP.send(null);
try {
return objHTTP.responseText;
} finally {
objHTTP = null;
}
}
function loadXML(response){
var objDOMParser = new DOMParser();
		var objDoc = objDOMParser.parseFromString(response, "text/xml");
while (this.hasChildNodes())
		this.removeChild(this.lastChild);
		for (var i=0; i < objDoc.childNodes.length; i++) {
				var objImportedNode = this.importNode(objDoc.childNodes[i], true);
				this.appendChild(objImportedNode);
		}
}
</script>
</body>
</html>
XSLT File :
<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:template match="/">
	<html>
	<body>
		<h2> My Data : </h2>
		<table border="1">
			<tr bgcolor="#9acd32">
				<th>Title</th>
				<th>Artist</th>
		<th>Address</th>
			</tr>
			<tr>
				<td><xsl:value-of select="catalog/cd/title"/></td>
				<td><a href="https://www.google.com"><xsl:value-of select="catalog/cd/artist"/></a></td>
		<td><a href="javascript:alert(1)"><xsl:value-of select="catalog/cd/address"/></a></td>
			</tr>
		</table>
	</body>
	</html>
</xsl:template>
</xsl:stylesheet>
To add more to the above issue. Alternatively, in the xsl we tried to define the <a> as below. But here we see the onclick attribute being removed post the transformation(as below)
Sample XSL line :
<td><a href="#" onclick="javascript:alert(1); return false;"><xsl:value-of select="catalog/cd/address"/></a></td>
Expected output :
<td><a href="#" onclick="javascript:alert(1); return false;">Bangalore</a></td>
Actual output :
<td><a href="#">Bangalore</a></td>
I can see an internal issue has been reported to track this issue <rdar://problem/73413312>
Can you please let us know when can we expect a resolution to this as this was working with iOS versions older than iOS14
Will this be fixed in the upcoming iOS version update - say v14.4 ?
Thanks,
Hello Team,
We are seeing some issues with the XSLT transformation with iOS14 version(starting 14.1 version) and this was working fine in earlier versions.
Issue : When an XSLT transformation is done using transformToDocument, we are observing that the anchor tag has the href attribute removed. Please refer to below example.
Sample usage :
new XSLTProcessor().importStylesheet(xsl_file)).transformToDocument(newParsedXML)
Sample line from XSL file :
<td><a href="javascript:alert(1)"><xsl:value-of select="catalog/cd/address"/></a></td>
Expected :
<a href="javascript:alert(1)">Bangalore</a>
Actual :
<a>Bangalore</a>
The UX is broken due to this as the links are no longer clickable with the href attribute being removed.
However, when the href contains the link(as below) - this works as expected.
Sample line from XSL file :
<td><a href="https://www.google.com"><xsl:value-of select="catalog/cd/artist"/></a></td>
Expected :
<a href="https://www.google.com">ArtistName</a>
Actual :
<a href="https://www.google.com">ArtistName</a>
Any help on this would be very much appreciated. Looking forward for a quick response
I have enclosed the sample HTML and the XSL file for reference.
HTML :
<!doctype html>
<html>
<head>
&#9;&#9;&#9;<meta charset="utf-8">
&#9;&#9;&#9;<title>Blank Form</title>
&#9;&#9;&#9;<h1>SAMPLE HTML PAGE</h1>
</head>
<body>
<button onclick="doTransform()">Click for XSLT Transformation</button>
<div class="add-info" style="display: none;">
<br>
&#9; <h3> Transformed XML Document </h3> :&#9;<span id="disp-div"></span>
</div>
<script>
function doTransform() {
&#9; //Create the XML
var sampleXML = "<?xml version=\"1.0\" encoding=\"UTF-8\"?><catalog><cd><title>Test Title</title><artist>CLICK ME!</artist></cd></catalog>";
var parser = new DOMParser();
var newParsedXML = parser.parseFromString(sampleXML, "text/xml");
//Load the XSLT file
var response = getData("../../../assets/xslt/emxSampleXSL.xsl");
var dom = document.implementation.createDocument("", "", null);
&#9; // dom.loadXML(response);
&#9;&#9;var objDOMParser = new DOMParser();
&#9;&#9;var objDoc = objDOMParser.parseFromString(response, "text/xml");
while (dom.hasChildNodes())
&#9;&#9;dom.removeChild(dom.lastChild);
&#9;&#9;for (var i=0; i < objDoc.childNodes.length; i++) {
&#9;&#9;&#9;&#9;var objImportedNode = dom.importNode(objDoc.childNodes[i], true);
&#9;&#9;&#9;&#9;dom.appendChild(objImportedNode);
&#9;&#9;}
//Create XSLT Processor
var xslProcess = new XSLTProcessor();
xslProcess.importStylesheet(dom);
//Transform the sample XML with the XSLT
var transformedXML = xslProcess.transformToDocument(newParsedXML);
console.log("---transformedXML---> "+transformedXML);
document.getElementsByClassName('add-info')[0].style.display = 'inline';
document.getElementById('disp-div').innerHTML = new XMLSerializer().serializeToString(transformedXML);
}
function getData(sPath, fnCallback){
var objHTTP = new XMLHttpRequest;
objHTTP.open("get", sPath, fnCallback != null);
objHTTP.send(null);
try {
return objHTTP.responseText;
} finally {
objHTTP = null;
}
}
function loadXML(response){
var objDOMParser = new DOMParser();
&#9;&#9;var objDoc = objDOMParser.parseFromString(response, "text/xml");
while (this.hasChildNodes())
&#9;&#9;this.removeChild(this.lastChild);
&#9;&#9;for (var i=0; i < objDoc.childNodes.length; i++) {
&#9;&#9;&#9;&#9;var objImportedNode = this.importNode(objDoc.childNodes[i], true);
&#9;&#9;&#9;&#9;this.appendChild(objImportedNode);
&#9;&#9;}
}
</script>
</body>
</html>
XSL file :
<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0"
xmlns:xsl="link">
<xsl:template match="/">
&#9;<html>
&#9;<body>
&#9;&#9;<h2> My Data : </h2>
&#9;&#9;<table border="1">
&#9;&#9;&#9;<tr bgcolor="#9acd32">
&#9;&#9;&#9;&#9;<th>Title</th>
&#9;&#9;&#9;&#9;<th>Artist</th>
<th>Address</th>
&#9;&#9;&#9;</tr>
&#9;&#9;&#9;<tr>
&#9;&#9;&#9;&#9;<td><xsl:value-of select="catalog/cd/title"/></td>
&#9;&#9;&#9;&#9;<td><a href="link"><xsl:value-of select="catalog/cd/artist"/></a></td>
<td><a href="javascript:alert(1)"><xsl:value-of select="catalog/cd/address"/></a></td>
&#9;&#9;&#9;</tr>
&#9;&#9;</table>
&#9;</body>
&#9;</html>
</xsl:template>
</xsl:stylesheet>
mohanmoni07.