SF Pro Removing Classes from custom select elements

Anonymous

#209965

I’m using the nice-select jQuery plugin to make my select boxes look a little less disgusting. It grabs the classes on each select element and copies them over to a div that contains a ul. Then once you click the “select” (actually a div now) it adds the class “open” to that div to display the ul element. However, I’ve noticed that any select element I manually put on the page anywhere work perfectly as intended, but select elements added by the SF Pro forms I create the “open” class never gets added when clicked.

I’ve watched in the console to see if there are any errors. There’s not. I’ve also watched each div element I’m clicking to see if it’s updating the class. You can see the classes act as if they’re updating, but no class is ever added.

I’ve also tried initializing the nice-select plugin INSIDE of the sf:init so that it’s run after, but then it just doesn’t work at all. No styling whatsoever.

// Initiate the custom selectbox
 $('select').addClass('wide').niceSelect();

Also, it appears that it’s only the class “open” that it doesn’t like. I’ve tried adding other classes, and they work ok, just not “open”. I even tried adding an onclick event to the div to toggleClass(‘open’) to no avail.

Anonymous

#209966

I thought I might need to add the actual markup that’s being output:

<select name="_sfm_recognition_document_type[]" class="sf-input-select wide" title="" style="display: none;">
  <option class="sf-level-0 sf-item-0 sf-option-active" selected="selected" data-sf-depth="0" value="">Type: All Checks</option>
  <option class="sf-level-0 " data-sf-count="4" data-sf-depth="0" value="BusinessCheck">Type: Business Check</option>
  <option class="sf-level-0 " data-sf-count="1" data-sf-depth="0" value="PAD">Type: Pre-Authorized Debit</option>
  <option class="sf-level-0 " data-sf-count="2" data-sf-depth="0" value="PersonalCheck">Type: Personal Check</option>
</select>
<div class="nice-select sf-input-select wide" tabindex="0">
  <span class="current">Type: All Checks</span>
  <ul class="list">
    <li data-value="" class="option selected">Type: All Checks</li>
    <li data-value="BusinessCheck" class="option">Type: Business Check</li><li data-value="PAD" class="option">Type: Pre-Authorized Debit</li>
    <li data-value="PersonalCheck" class="option">Type: Personal Check</li>
  </ul>
</div>

Anonymous

#209968

https://cl.ly/70444f1c38cc

Trevor

#209989

If ajax is being used on the form, that will remove any classes added. The AutoCount feature does this, and I am not sure, but the general Ajax feature might also. So, test which (or both) it is. You need some custom JavaScript to reapply the classes.

This post shows the script(s) needed:

https://support.searchandfilter.com/forums/topic/re-initialize-plugin-js-swup/#post-203208

Anonymous

#209995

So even when I disable ajax, auto count, and auto submit, it still doesn’t work as expected.
I tried adding the initialization of nice-select into the ajax complete as you mentioned also, and that didn’t work either.

(function ( $ ) {
    "use strict";
    $(document).on("sf:ajaxfinish", ".searchandfilter", function(){
        $('#search-filter-form-19977 select').niceSelect();
    });
}(jQuery));

Anonymous

#209997

This reply has been marked as private.

Trevor

#209999

mmm

The alternaitve is to use Select2, which we include with the plugin, is maintained by Automattic (via WooCommerce) and is quite good?

These two threads discuss this (many of the posts won’t be relevant to you):

https://support.searchandfilter.com/forums/topic/design/

and

https://support.searchandfilter.com/forums/topic/customise-dropdown-combobox/

Anonymous

#210001

Ok, I guess we’ll just use Select2 and try to style it similarly.

[Author]

Posts