Cannot read property 'className' of undefined

[Mobe91]

When I create a select control without any options and with width: auto, I get the following error during initialization:

Uncaught TypeError: Cannot read property 'className' of undefined
    at Selectpicker.liHeight (bootstrap-select.js:1474)
    at eval (bootstrap-select.js:1716)

When I remove the width: auto option the initialization succeeds but I get the following error when I click on the select control:

bootstrap-select.js:1474 Uncaught TypeError: Cannot read property 'className' of undefined
    at Selectpicker.liHeight (bootstrap-select.js:1474)
    at Selectpicker.setSize (bootstrap-select.js:1672)
    at HTMLButtonElement.eval (bootstrap-select.js:1994)
    at HTMLButtonElement.dispatch (jquery.js:5183)
    at HTMLButtonElement.elemData.handle (jquery.js:4991)

I am using bootstrap-select v1.13.2

[caseyjhol]

Bug reports must include a live demo of the problem. Per our contributing guidelines, please create a reduced test case via Plunker, jsFiddle, CodePen or JS Bin, and report back with your link, Bootstrap version, bootstrap-select version, and specific browser and OS details.

[Mobe91]

Here is the live demo: https://plnkr.co/edit/xR4pMYKoFwYxXV6B2t5A?p=preview
Bootstrap version: 4.1.0
jQuery version: 3.2.1
bootstrap-select version: 1.13.2
Tested with browsers Firefox and Chrome on Windows 10

[Mobe91]

@caseyjhol Oh you have already fixed that. Nice! 👍

[kriit24]

in bootsrap-select.js line 1063 i change the code
if (this.options.title && !this.multiple) {
TO
if (this.options.title /&& !this.multiple/) {

and now it works, but a am sure that "!this.multiple" is needed

[robertpustulka]

@caseyjhol Hello, thanks for the fix. Can you tag this fix?

[cubitworx]

I am experiencing the same problem. It occurs in v1.13.2 but not in v1.13.1 so I have downgraded for now. This happens when there are no options in the select element. In my case I was able to narrow the offending line down to the following:

bootstrap-select/js/bootstrap-select.js

Line 1448 in f629d2f

a.className = 'dropdown-item ' + this.$element.find('option')[0].className;

Where className does not exist on this.$element.find('option')[0] because there are no options and index 0 is undefined.

[redbonzai]

I am getting the same error. But in my case the select already has options, and I am checking whether the select contains particular options. If it does, then I am forcing the option to toggle selected, and then I am refreshing the select with this : '$('.selectpicker').selectpicker('refresh');`
That is where the error is thrown.

Here is my code:

 var modal = $("div#editUserActivity");
    modal.find("input[name$=activity_name]").attr('value', data.activity.activity_name);
    modal.find('#activity_description').text(data.activity.activity_description);

$.each( data.activity.focuses, function(index, value) {
         if (modal.find('#activity_focus option[value="'+ value.id +'"]').length !== 0) {
                modal.find('#activity_focus').prop('selected', true).val(value.id);
        } else {
                modal.find('#activity_focus').append($('<option />').val(value.id).text(value.primary_focus).attr('selected', 'selected'));
       }

        modal.find('.selectpicker').selectpicker('refresh'); <-- where error is thrown.
 });

The error thrown:

app.js?id=289c53d38b0c16fad0d1:3502 Uncaught TypeError: Cannot read property 'className' of undefined
    at Selectpicker.liHeight (app.js?id=289c53d38b0c16fad0d1:3502)
    at Selectpicker.setSize (app.js?id=289c53d38b0c16fad0d1:3700)
    at Selectpicker.refresh (app.js?id=289c53d38b0c16fad0d1:4633)
    at HTMLSelectElement.<anonymous> (app.js?id=289c53d38b0c16fad0d1:4722)
    at Function.each (app.js?id=289c53d38b0c16fad0d1:25190)
    at jQuery.fn.init.each (app.js?id=289c53d38b0c16fad0d1:25025)
    at jQuery.fn.init.Plugin [as selectpicker] (app.js?id=289c53d38b0c16fad0d1:4702)
    at Object.<anonymous> (activities.js?id=4e199cc85f13e6c4bd44:278)
    at Function.each (app.js?id=289c53d38b0c16fad0d1:25190)
    at Object.<anonymous> (activities.js?id=4e199cc85f13e6c4bd44:271)

[redbonzai]

It looks like if I access selectpicker by the the id selector instead of by the class the error is no longer emitted.
So in this case : modal.find('#activity_focus').selectpicker('refresh');

This seems to solve my problem.
I don't know what this says about other probably reasons for this error though.

Thank you for your time.

Christian

[mdjaman]

No fix at all!

[yurik94]

Commit: 62a3eac fixes the problem but it should be published a new version!

[caseyjhol]

Released in v1.13.3!

[siva-gembrill]

I also received same issue in bootstrap file