In the most recent update, the following change was made:
Security Fix – The default render template for select2 fields no longer allows HTML to be rendered resolving a potential XSS issue
I need to reverse this change as I add HTML into my Select2 fields to improve the functionality of my site. How can I do this please? Is there a way to enable it to only certain HTML elements? (I use a CODE element).
Thanks
Shaun
I also need this. I display a list of Material Symbols in a select2 field, and since the update they show as raw HTML: <span class="material-symbols-outlined">bakery_dining</span>.
This seems to work, we are using it for the admin area only.
add_action(‘acf/input/admin_footer’, function() {
if (!is_admin()) {
return;
}
?>
<script>
acf.add_filter(‘select2_args’, function(args) {
args.templateSelection = function(selection) {
var $selection = jQuery(‘<span class=”acf-selection”></span>’);
$selection.html(acf.escHtml(selection.text));
$selection.data(‘element’, selection.element);
return $selection;
}
return args;
});
</script>
<?php
});
When updated to:
<script>
acf.add_filter('select2_args', function(args) {
args.templateSelection = function(selection) {
var $selection = jQuery('<span class="acf-selection"></span>');
$selection.html(acf.escHtml(selection.text));
$selection.data('element', selection.element);
return $selection;
}
args.templateResult = function(selection) {
var $selection = jQuery('<span class="acf-selection"></span>');
$selection.html(acf.escHtml(selection.text));
$selection.data('element', selection.element);
return $selection;
}
return args;
});
</script>
I renders both the selected value HTML and the HTML in the search result template (if you have HTML there also – like I have to allow icon selection)
Just saw this topic as I stumbled over the same problem in a very old topic.
Would be great to get this resolved somehow without custom code – it’s needed and improves the UI a lot!
I’m also having the same issue. I use it to allow users to pick predefined colours and icons. It was all working up to about a month ago and now I have it broken across literally 50+ websites or more.
piotkus solution works perfectly for this, just add it in your custom functions and she’ll be apples.
