Collapsible Optgroups + Clickable optgroups

[mikehobson]

I am using Bootstrap multi-select for a list of countries and football leagues with those countries. I want the interface to be as easy as possible so I have enabled the following options

enableClickableOptGroups: true,
enableCollapsibleOptGroups: true,
collapseOptGroupsByDefault: true,

This works well as users can select individual leagues or click at a country level and select all leagues for that country in one go

I have created a JSfiddle here https://jsfiddle.net/mikehobson/w53c2vd8/8/

The only flaw is that if you click anywhere on the row except exactly on the down arrow it selects all the items in that optgroup, which from a user experience point of view isn't great. So for example, if I click to the far right of Albania in the same row in my example, it still selects all

I want the behaviour that if I click the check box only it selects all the options under the optgroup, if I click anywhere else on that row it expands it to show the items underneath but im not sure if this is possible or if I have done something wrong

[LucasRoquilly]

Hi,

I had the same exact problem and managed to find an easy fix. This bug is due to the <label> element triggering the checkbox when clicked. Quick way to fix it is by appending the checkbox to the <a> element and not nested in the <label> element.

In bootstrap-multiselect.js, I changed the line :
$('a label', $li).prepend('<input type="checkbox" value="' + value + '"/>');
by :
$('a', $li).prepend('<input type="checkbox" value="' + value + '"/>');

And for fixing the design, I changed the line :
$("li.multiselect-group > a > input", this.$ul).css('margin', '4px 0px 5px -20px');
by the line :
$("li.multiselect-group input", this.$ul).css('margin-left', '12px');

Hope it can help anyone !

[tiesont]

Hmm, it's a bit disconcerting that we build the template that way - form elements (input, select, textarea, buttons) really shouldn't be embedded in an anchor element, since interactive elements are not permitted (see MDN). I think we'll need to address that whenever we start updating for BS5 support.