inuse class not applied to multi-select chosen inputs

[galvarez421]

It seems that the inuse class is not being applied to multi-select chosen inputs. The issue can be seen here: http://yadcf-showcase.appspot.com/DOM_source_chosen.html.

The inuse class is being applied to all other column filter inputs on that page. This can be tested by opening the browser console and running the command

$(".inuse").length

after providing a value for each input. This number will increase after providing a value for each input except for the multi-select. You can also inspect the element and see that no inuse class is being applied to it when it has one or more selections.

[vedmack]

its by design, I thought if user wants to use third party plugin on top of the filter he wont be needing the inuse class and its "filter coloring" , until now no one asked for it too :) , I can agree that it might look no consistent that some filters being colored and some not. why do you want that class to be added to chosen multi select?

[galvarez421]

Hi, thanks for the prompt reply!

I would like to use the class as a CSS hook, namely, I am trying to add a background color to active chosen inputs like this:

.inuse + .chosen-container-single .chosen-single,
.inuse + .chosen-container-multi .chosen-choices {
background-color: #d9edf7;
}

This works for the single chosen but not for the multi chosen input due to the missing class for the latter.

I am sure I can add some custom JS (or possibly just CSS) instead of relying on the .inuse class, but I just figured that this behavior was a bug because the application of the classes seems to be inconsistent: notice in the link provided in the OP that the select element before the .chosen-container-single element receives the .inuse class when it is being used but the select element before the .chosen-container-multi element does not... I guess I would just expect the class to be consistently applied for select elements using the Chosen plugin.

[vedmack]

Please take a look at the jsfiddle sample and let me know if that what you wanted, it uses the latest yadcf beta 0.9.2.beta.9

[galvarez421]

Yes, that is what I wanted. Thanks!

I updated the jsfiddle to show example CSS using the inuse class as a styling hook for the Chosen inputs.

https://jsfiddle.net/6n7bn2tx/14/

[vedmack]

Cool, then I will commit it to github repo later on, for meanwhile will post your code here for future reference

$(document).ready(function() {
  var table = $('#example').DataTable({
    responsive: true
  });
  yadcf.init(table, [{
    column_number: 1,
    filter_type: "select",
    select_type: "chosen"
  }, {
    column_number: 2,
    filter_type: "multi_select",
    select_type: "chosen"
  }, ]);
});

css

.inuse + .chosen-container-single .chosen-single,
.inuse + .chosen-container-multi .chosen-choices {
  background-color: #d9edf7;
  background-image: none;
}

[vedmack]

added in yadcf 0.9.2.beta.9