You can put in to your footer, or in the head, if just on admin screen or even on frontend side depends where you are using acf…
I would recommend the following hook, but the sulotion above is good too:
https://codex.wordpress.org/Plugin_API/Action_Reference/admin_enqueue_scripts
OR
https://developer.wordpress.org/reference/functions/wp_enqueue_script/
I digged into it a little deeper myself because I had to get it fixed for a customer…
There seems to be a bug in select2 libary since latest Safari release which is not really getting fixed, I found some topics on it, i.e.:
https://stackoverflow.com/questions/54666878/page-jumps-to-bottom-after-making-a-selection
https://github.com/select2/select2/issues/5427
For me this seems to be a good workaround for the moment without modifying the select2 js code:
$(document).ajaxStop(function() {
$('select.select2-hidden-accessible').on('select2:closing', function() {
$('body > span.select2-container.select2-container--default.select2-container--open').hide();
});
$('select.select2-hidden-accessible').on('select2:open', function() {
$('body > span.select2-container.select2-container--default.select2-container--open').css('display','inline-block');
});
});
Just add the code to your scripts and it should work… Background:
It is a safari specific problem, that the page scrolls to bottom where the dropdown html element is placed and removed, at the end of <body>… I can’t really figure out why in detail, but if the element is not visible when getting removed the bug does not occur. So I basicly hust hook the libarys events and toogle display!
I have the issue with every select field in safari!
