There is a problem with the Post Object field and the latest version of Safari Browser 12.0. After selecting a post, the browser jumps to the bottom of the page.
Wordpress 4.9.8 (clean installation)
ACF Pro 5.7.6
Apple Safari 12.0. OSX
No problems with Chrome, FireFox or Opera.
I am also experiencing this issue using a form on the front end using acf_form. It seems to occur any time you click an item from a field with ‘Select’ set as the ‘Appearance’.
Same WordPress version, ACF pro and Apple Safari as MH describes.
Same issue. Has this been resolved?
I have the issue with every select field in safari!
Elliott himself is looking into it based on a ticket I have created. Will share anything I find. It’s a most annoying issue as many of our authors use safari.
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!
This is very helpful for now. Do you put this in your functions.php?
Or perhaps in footer.php? This is for the admin area so I’m not sure.
Just tried it and it works great. Thank you totatari.
Where are you guys putting this script?
In a JavaScript File, loaded in Admin Footer.
Which precisely is the admin footer file which will retain this JS code even when I update core WP? I’d appreciate a precise name of the file. Thanks!
Place this to your function.php
/**
ACF Select field: Fix for Safari Browser
*/
add_action('admin_footer', 'my_admin_add_js');
function my_admin_add_js() {
?>
<script>
$(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');
});
});
</script>
<?php
}
Thank you MH. This is so helpful!
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/
