SIGN UP

Disable native dropdown behavior on iOS / Android

By: Jens Echterling | Asked: 05/03/2023
Forums › Category: Code Help › Disable native dropdown behavior on iOS / Android
0 Vote Up Vote Down
Jens Echterling asked 1 year ago
I have a drodown field with many options that the user can select from. Cascading dropdowns are not a good option. On desktop we are using the autocomplete. But on iOS / Android where we have the majority of the traffic the native dropdown without search option is shown.  How can I disable the native dropdown interaction on iOS / Android but show the Desktop interaction design with autocomplete? 

Many thanks in advance!
Victor Font replied 1 year ago

Your question has been bothering me because I don't think there is a way. Formidable uses the Chosen jQuery library to implement the autocomplete function we see with dropdowns. The Chosen library has been around for a very long time and is implemented almost everywhere you can see a dropdown.

The original developers, Harvest, ceased development with version 1.8.7. That was roughly 6 years ago. Version 1.8.7 was never enabled for mobile devices. Another group of developers took over development and the current version today is 2.2.0. https://jjj.github.io/chosen/

What bothered me about your question is that the dropdowns on my site work with autocomplete on mobile devices. I dove into this a little and can see that Formidable still uses Version 1.8.7. When I checked the source code on my site, our Easy Digital Downloads plugin uses Version 2.1.0. Formidable's supplied library doesn't even load on our site, so Formidable's forms are using the library supplied by EDD.

The only thing I can suggest is to open a feature request ticket with Strategy 11 and ask them to update the chosen library to Version 2.2.0 so dropdowns will work with mobile.

Jens Echterling replied 1 year ago

Thanks for your advice!

1 Answers
0 Vote Up Vote Down
Jens Echterling answered 1 year ago
FYI: I have been able to find a solution. See attached code. 

Start your code here
function cwpai_formidable_select2_script() { // Define the specific page IDs $target_page_ids = array(4227, 3463);
// Check if the current page is one of the target pages and if the device is mobile if (is_page($target_page_ids) && wp_is_mobile()) { // Get URL of child theme directory $theme_url = get_stylesheet_directory_uri(); // Enqueue select2 script and style from child theme wp_enqueue_script( 'select2', $theme_url . '/js/select2.min.js', array('jquery'), '4.0.13', true ); wp_enqueue_style( 'select2', $theme_url . '/css/select2.min.css', array(), '4.0.13', 'all' );
// Enqueue custom script to apply select2 to form fields, in the footer wp_add_inline_script( 'select2', ' jQuery(document).ready(function($) { function applySelect2() { $("#field_apr8z, #field_982ev").not(".select2-hidden-accessible").select2({ width: "100%", minimumInputLength: 1, minimumResultsForSearch: 0, allowClear: true, placeholder: "' . esc_html__( 'Suche und wähle aus', 'generatepress-child' ) . '", language: { inputTooShort: function() { return "' . esc_html__( 'Suche und wähle aus', 'generatepress-child' ) . '"; } } }).on("select2:opening", function() { window.setTimeout(function() { $(".select2-search__field").focus(); }, 0); }); } applySelect2(); // apply select2 on page load
// form fields are being loaded dynamically var observer = new MutationObserver(applySelect2); observer.observe(document.body, {childList: true, subtree: true}); }); ', 'after' ); } } add_action( 'wp_enqueue_scripts', 'cwpai_formidable_select2_script' );

Making the Best WordPress Plugin even better - Together

Take on bigger projects with confidence knowing you have access to an entire community of Formidable Experts and Professionals who have your back when the going gets tough. You got this!
Join the community
crossarrow-right