Customise dropdown (combobox)

Trevor

#180469

The default comobox script we use is Chosen, and what you would have seen before. The downside to Chosen is that it is old and does not play well with apple devices.

The behavior you see, where the dropdown opens, the cursor jumps in to the search field, and then out and focuses on the choices dropdown list, is standard behavior. Modifying this is difficult, because almost any solution you write either breaks on IE11, or breaks multi-select.

Anonymous

#180473

Ok, so back to my original question.

I found /public/assets/js/chosen.jquery.js and moved “<div class=\”chosen-search\”>\n <input class=\”chosen-search-input\” type=\”text\” autocomplete=\”off\” />\n </div>\n” to right before “<div class=\”chosen-drop\”>” on row 587, and then made some CSS changes.

Will this be overwritten when I update the plugin? If so, where can I make these changes so they don’t get overwritten?

Trevor

#180475

You would need to make a copy of the chosen script in your child theme folder and enqueue that from your child theme functions.php file.

In that same functions.php file, you would dequeue the original file, inside the same function as you enqueue your cutomised file. The EXTRA lines you would need are:

wp_dequeue_script( 'search-filter-chosen-script' );
wp_deregister_script( 'search-filter-chosen-script' );

The same goes for any CSS you make, it must not be by editing our CSS file, but instead in a new file (or any other method) that is not replaced on updates.

Anonymous

#180477

Thanks, that did the trick.

Trevor

#180479

Is this all resolved for now?

Anonymous

#180481

Yes, thanks.

[Author]

Posts