maxOptions display bug

[dernst-art]

jQuery version: 3.5.1
Bootstrap version: 5.0.0-beta3
bootstrap-select version: 1.14.0-beta2
Browser: Firefox

If I create a select with BS5 which is limited by the "max-options" parameter and click on options after the max limit is reached, the options will be still marked with an icon. But these options aren't really selected, so it seems it is an display bug.

Here is a codepen example: https://codepen.io/dernst/pen/abpperx

[dppss90008]

I found the same bug, max-options wasn't work, please help and fix it in 1.14.0-beta2

[ajaypatelaj]

Found the same one

Plnkr link: https://plnkr.co/edit/c204mzsHoyfQ4vNB to reproduce

[Tuisto59]

Hi, I'm new to use bootstrap-select, and see the same displaying icon error
JQuery 3.1.0
Bootstrap 5.0.1
Browser: Chrome, Firefox
Bootstrap-select : 1.14.0-beta2

[max-maurice]

Possible workaround:

// "dropdown" is the boostrap-select element, that contains the <ul>
// "element" is the associated <select> element

// Workaround for https://github.com/snapappointments/bootstrap-select/issues/2593
// must be called after bootstrap-select initialization (ie. after calling $('select').selectpicker())
dropdown.querySelector('.inner').addEventListener("click", e => {
    // ignore workaround if already selected. allows deselecting items
    if (e.target instanceof HTMLElement && e.target.closest('li').classList.contains('selected')) return;

    const maxOptions = Number.parseInt(element.dataset.maxOptions);

    // maximum number of items reached?
    if (!Number.isNaN(maxOptions) && element.selectedOptions.length >= maxOptions) {
        // "cancel" click event, which prevents bootstrap-select's setSelected() from being called.
        e.stopPropagation();
    }
}, true /* in capture phase */);

I guess this also prevents the maxOptionsText notice to appear.

[margiel]

HI,

I found the simplest solution:

In bootstrap-select.js in event:
this.$menuInner.on("click", "li a"
change the timeout method

setTimeout(function () { O.setSelected(l, !1); }, 10),
to:
setTimeout(function () { O.setSelected(o, !1); }, 10),

Can anybody commit this change?

[NicolasCARPi]

@margiel The line:

bootstrap-select/js/bootstrap-select.js

Line 2623 in 225ca0a

that.setSelected(clickedIndex, false);

setTimeout(function () {
  that.setSelected(clickedIndex, false);
}, 10);

l would be clickedIndex, what would be o there??

[margiel]

My solution is for code from:
https://cdn.jsdelivr.net/npm/bootstrap-select@1.14.0-beta2/dist/js/bootstrap-select.min.js
unimified by https://unminify.com/
I could't found in that code your line.
To be honset my solution not solves the multi selection problem with optgroups but I have no idea how to solve that.