Hi all,
I managed to patch the issue by adding an observer to detect changes on the response output div and then decoding its contents back to html elements. This resolves the issue in Chrome and other browsers. Note that on Firefox we did not face this issue.
Hope this helps!
<script>
document.addEventListener('DOMContentLoaded', function() {
//Decodes HTML entities
function decodeEntities(str) {
var textarea = document.createElement('textarea');
textarea.innerHTML = str;
return textarea.value;
}
//Updates contents of the target HTML element
function updateContent(target) {
if (target) {
target.innerHTML = decodeEntities(target.innerHTML);
}
}
//Select the div where the thank you message is printed
var targetNode = document.querySelector('.wpcf7-response-output');
//Add an observer to observe when the div contents change
var observerConfig = { childList: true, subtree: true, characterData: true };
var observerCallback = function(mutationsList, observer) {
for (var mutation of mutationsList) {
if (mutation.type === 'childList' || mutation.type === 'characterData') {
updateContent(mutation.target);
observer.disconnect(); //Disconnect observer to prevent infinite loop when this change is applied
}
}
};
var observer = new MutationObserver(observerCallback);
if (targetNode) {
observer.observe(targetNode, observerConfig); //Start observing the target node
}
//Reconnect the observer after the form submission
document.addEventListener('wpcf7mailsent', function() {
if (targetNode) {
observer.observe(targetNode, observerConfig);
}
}, false);
});
</script>