ACF select2 stop popping out the keyboard on select

问题

I am using the latest version of acf pro, I am using select2 dropdown lists with a search-input, on mobile I would like them to stop pulling out the keyboard when the dropdown list is open, the logical behavior is to open > browse the list> otherwise tap search-input.

I tried to solve the problem without success.

[ enter image description here

I give you all the necessary information

wp-content/plugins/advanced-custom-fields-pro/assets/inc/select2/4/select2.min.css?ver=4.0

Html of dropdown

<span class="select2 select2-container select2-container--default -acf select2-container--below select2-container--open" dir="ltr" style="width: 100%;">
<span class="selection">
<span class="select2-selection select2-selection--single" role="combobox" aria-haspopup="true" aria-expanded="true" tabindex="0" aria-labelledby="select2-acf-field_5d6d3edc824b6-container" aria-owns="select2-acf-field_5d6d3edc824b6-results">
<span class="select2-selection__rendered" id="select2-acf-field_5d6d3edc824b6-container">
<span class="select2-selection__placeholder">Select</span></span><span class="select2-selection__arrow" role="presentation"><b role="presentation"></b></span>
</span>
</span>
<span class="dropdown-wrapper" aria-hidden="true"></span>
</span>

my attempts codes

  function my_acf_input_admin_footer() {
            
        ?>
        <script type="text/javascript">
        (function($) {
            
            
        // my attempt 1 apply this event to all select2 elements
        $(document).ready(function() {
          $('.select2-container').on('select2:open', function() {
            if (Modernizr.touch) {
              $('.select2-search').prop('focus', false);
            }
          });
        });
        
        $(document).ready(function() {
          $('.select2-container').select2();
        });
            
            
        // my attempt 2 keep search input, but avoid autofocus on dropdown open
        $('.select2-container').on('select2:open', function (e) {
            $('.select2-search input').prop('focus',false);
        });
            
            
        })(jQuery); 
        </script>
        <?php
                
        }
        
        add_action('acf/input/admin_footer', 'my_acf_input_admin_footer');

sources :

https://support.advancedcustomfields.com/forums/topic/disable-search-in-select2/

Prevent select2 from autmatically focussing its search-input when dropdown is opened

select2 keyboard issue on mobile

Update

ok solved, this code worked for me, hope this will last

function my_acf_input_admin_footer() {
    
?>
<script type="text/javascript">
(function($) {
    
// my attempt 2 (working) keep search input, but avoid autofocus on dropdown open
$('select').on('select2:open', function (e) {
    $('.select2-search input').prop('focus',false);
});
        
})(jQuery); 
    
</script>
<?php       
}

add_action('acf/input/admin_footer', 'my_acf_input_admin_footer');

来源：https://stackoverflow.com/questions/64864547/acf-select2-stop-popping-out-the-keyboard-on-select

标签

javascript

advanced-custom-fields