bootstrap-select.js:797 Uncaught TypeError: Cannot read property '0' of undefined

[ghost]

@Dhara-ZYMR commented on Jun 5, 2018, 9:53 AM UTC:

I am using bootstrap-select with its angularjs directive Ng-bootstrap-select

I am getting following error while scrolling through the options of the select box

    bootstrap-select.js:797 Uncaught TypeError: Cannot read property '0' of undefined
        at scroll (bootstrap-select.js:797)
        at HTMLDivElement.<anonymous> (bootstrap-select.js:738)
        at HTMLDivElement.dispatch (jquery.js:5206)
        at HTMLDivElement.elemData.handle (jquery.js:5014)

angular.js:14794 TypeError: Cannot read property '0' of undefined
    at scroll (bootstrap-select.js:797)
    at Selectpicker.createView (bootstrap-select.js:735)
    at Selectpicker.setSize (bootstrap-select.js:1684)
    at Selectpicker.refresh (bootstrap-select.js:2546)
    at HTMLSelectElement.<anonymous> (bootstrap-select.js:2612)
    at Function.each (jquery.js:362)
    at jQuery.fn.init.each (jquery.js:157)
    at jQuery.fn.init.Plugin [as selectpicker] (bootstrap-select.js:2592)
    at ng-bootstrap-select.js:294
    at Scope.$eval (angular.js:18521)

Please note following things:

1. I am using multiple selectboxes on my page. Each select box options are based on the values selected of the previous select-box.
   I send a $http request to get the options of the select-box based on the previous box value selected.
2. Another problem is that the dependent options also don't get refreshed when the dynamic options are fetched again for the same select-box

Trying to create a jsfiddle to demonstrate this issue.
Thanks in advance for help

This issue was moved by caseyjhol from snapappointments/bootstrap-select-temp#67.

[ghost]

@caseyjhol commented on Jun 5, 2018, 7:58 PM UTC:

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, Angular version, Bootstrap version, bootstrap-select version, and specific browser and OS details.

[ghost]

@Dhara-ZYMR commented on Aug 1, 2018, 10:07 AM UTC:

Angular version: 1.6
Bootstrap version 4
bootstrap-select version 1.13.1

As I said I have options coming in dynamically using APIs, and the options are also refreshed based on the previous select-box selection.
I tried to create a test-case but I am not able to reproduce it there.

But in my application, I have this problem everywhere I use bootstrap-select.
Any other way I can show you the issue I am facing? Like Skype or Zoom ?

[caseyjhol]

Released in v1.13.4!

[esamo]

I was having this error since JS libs update, then did an update of bootstrap-select to v1.13.4, but that only changed few of the errors into other ones and did not resolve the issue.

AngularJS v1.7.5.
Bootstrap v3.3.7.
Chrome v71.0.3578.98.

It happens when you call selectpicker('refresh') on select field with initiated selectpicker. No idea why. Possibly throttling or loops. I wrapped the refresh call in a self-extending timeout of 250ms that would eliminate both cases but it did not help. Sometimes these errors do not appear with the same config.

I have no ng-model set up. Most of the fields are of a multiple choice.

[updated logs]

Uncaught TypeError: Cannot read property '0' of undefined
    at i (bootstrap-select.js:2757)
    at u.createView (bootstrap-select.js:2757)
    at u.setSize (bootstrap-select.js:2757)
    at u.refresh (bootstrap-select.js:2757)
    at HTMLSelectElement.<anonymous> (bootstrap-select.js:2757)
    at Function.each (jquery-3.3.1.min.js?1784456433:2)
    at e.fn.init.each (jquery-3.3.1.min.js?1784456433:2)
    at e.fn.init.f [as selectpicker] (bootstrap-select.js:2757)
    at common.js?1784456433:1231

i | @ | bootstrap-select.js:2757
-- | -- | --
  | createView | @ | bootstrap-select.js:2757
  | setSize | @ | bootstrap-select.js:2757
  | refresh | @ | bootstrap-select.js:2757
  | (anonymous) | @ | bootstrap-select.js:2757
  | each | @ | jquery-3.3.1.min.js?1784456433:2
  | each | @ | jquery-3.3.1.min.js?1784456433:2
  | f | @ | bootstrap-select.js:2757
  | (anonymous) | @ | common.js?1784456433:1231
  | setTimeout (async) |   |  
  | selectFieldOptionsFix | @ | common.js?1784456433:1230
  | (anonymous) | @ | app_directives.js?1784456433:886
  | $digest | @ | angular.min.js?1784456433:151
  | $apply | @ | angular.min.js?1784456433:155
  | (anonymous) | @ | angular.min.js?1784456433:22
  | invoke | @ | angular.min.js?1784456433:45
  | c | @ | angular.min.js?1784456433:22
  | Tc | @ | angular.min.js?1784456433:22
  | xe | @ | angular.min.js?1784456433:21
  | (anonymous) | @ | angular.min.js?1784456433:346
  | l | @ | jquery-3.3.1.min.js?1784456433:2
  | c | @ | jquery-3.3.1.min.js?1784456433:2
  | setTimeout (async) |   |  
  | (anonymous) | @ | jquery-3.3.1.min.js?1784456433:2
  | u | @ | jquery-3.3.1.min.js?1784456433:2
  | fireWith | @ | jquery-3.3.1.min.js?1784456433:2
  | fire | @ | jquery-3.3.1.min.js?1784456433:2
  | u | @ | jquery-3.3.1.min.js?1784456433:2
  | fireWith | @ | jquery-3.3.1.min.js?1784456433:2
  | ready | @ | jquery-3.3.1.min.js?1784456433:2
  | _ | @ | jquery-3.3.1.min.js?1784456433:2

Uncaught TypeError: Cannot read property 'data' of undefined
    at u.render (bootstrap-select.js:2757)
    at u.init (bootstrap-select.js:2757)
    at new u (bootstrap-select.js:2757)
    at HTMLSelectElement.<anonymous> (bootstrap-select.js:2757)
    at Function.each (jquery-3.3.1.min.js?1784456433:2)
    at e.fn.init.each (jquery-3.3.1.min.js?1784456433:2)
    at e.fn.init.f [as selectpicker] (bootstrap-select.js:2757)
    at common.js?1784456433:1231

render | @ | bootstrap-select.js:2757
-- | -- | --
  | init | @ | bootstrap-select.js:2757
  | u | @ | bootstrap-select.js:2757
  | (anonymous) | @ | bootstrap-select.js:2757
  | each | @ | jquery-3.3.1.min.js?1784456433:2
  | each | @ | jquery-3.3.1.min.js?1784456433:2
  | f | @ | bootstrap-select.js:2757
  | (anonymous) | @ | common.js?1784456433:1231
  | setTimeout (async) |   |  
  | selectFieldOptionsFix | @ | common.js?1784456433:1230
  | (anonymous) | @ | app_directives.js?1784456433:292
  | $digest | @ | angular.min.js?1784456433:151
  | $apply | @ | angular.min.js?1784456433:155
  | (anonymous) | @ | angular.min.js?1784456433:22
  | invoke | @ | angular.min.js?1784456433:45
  | c | @ | angular.min.js?1784456433:22
  | Tc | @ | angular.min.js?1784456433:22
  | xe | @ | angular.min.js?1784456433:21
  | (anonymous) | @ | angular.min.js?1784456433:346
  | l | @ | jquery-3.3.1.min.js?1784456433:2
  | c | @ | jquery-3.3.1.min.js?1784456433:2
  | setTimeout (async) |   |  
  | (anonymous) | @ | jquery-3.3.1.min.js?1784456433:2
  | u | @ | jquery-3.3.1.min.js?1784456433:2
  | fireWith | @ | jquery-3.3.1.min.js?1784456433:2
  | fire | @ | jquery-3.3.1.min.js?1784456433:2
  | u | @ | jquery-3.3.1.min.js?1784456433:2
  | fireWith | @ | jquery-3.3.1.min.js?1784456433:2
  | ready | @ | jquery-3.3.1.min.js?1784456433:2
  | _ | @ | jquery-3.3.1.min.js?1784456433:2