Custom Pop-up, onClick is not rendering

UgurcanErkal

Hi guys,

I'm creating a custom pop-up, and the content is pure HTML. On that HTML content, I'm trying to put onClick but it is not rendering. 

 

    } else {
        if (filteredProductList[i].productType == 'Permit') {
            popUpContent += "<a class='slds-button slds-button_brand'  href='#' onClick='return false;'>Sold Out</a>";
        } else {
            popUpContent += "<a class='slds-button slds-button_brand' href='#' onClick='notifyMe('TEST')'>Notify Me</a>";
            popUpContent += "<input type='button' class='slds-button slds-button_brand' onClick='notifyMe('TEST')'>Notify Me</input>";
        }
    }
}

view.popup.open({
title: popUpTitle,
location: m_event.mapPoint,
content: popUpContent
});

 

But when I check the created pop up I'm not able to see this onClick rendered.

 

Is it forbidden by Esri to create an element with onClick?

 

JoelBennett

Yes, in version 4.14, ESRI added the HTML sanitizer which, among other things, prevents you from adding event handlers in your popup content.  See the final breaking change listed here.

Fortunately, if you prefer to decide for yourself what is and isn't permissible in your applications, it's fairly easy to bypass.  You'd just need to add the following somewhere near where your application starts up.

require(["esri/widgets/support/widgetUtils"], function(widgetUtils) {
	var sanitize = widgetUtils.renderingSanitizer.sanitize;

	widgetUtils.renderingSanitizer.sanitize = function(b, c) {
		return ((typeof b == "string") ? b : sanitize.call(this, b, c));
	};
});