Htykuut

I have made a fiddle here.
I have a bootstrap 4 project, using latest versions of bootstrap-select, perfect-scrollbar, jquery.

In a page with 4 selectpicker elements, the Perfect Scrollbar does not work on the drop-downs although there are no errors. I think it is related to how I initialize each instance of the bootstrap select for each selectipicker on the page.

My code is

$(document).ready(function() {



  // Init PerfectScrollbar + SelectPicker

  if ($('.dropdown-menu.inner').length != 0) {



    const spps = ;



    // For each instance of SelectPicker

    $('.dropdown-menu.inner').each(function(i) {



      // Get closest boostrap-select dropdown and add data-sp-id="i" so we know which is selected later

      $(this).attr('data-sppsid', i);



      // Using the SelectPicker array, initialize each picker scrollbar

      spps[i] = new PerfectScrollbar(this, {

        minScrollbarLength: 40

      });



    });



    // When a SelectPicker is opened

    $('body').on('shown.bs.dropdown', function(e) {



      e.stopImmediatePropagation();



      // Get the picker sppsid

      var i = $(e.target).find('.dropdown-menu.inner').data('sppsid');



      console.log(spps[i]);



      // Update the picker in the array

      spps[i].update();



    });



  }



  $('.ps-scrollbar-y').on('click', function(e) {

    e.stopPropagation();

  });



});

At the console.log I can see that the element it a PerfectScrollbar and it contaoins:

PerfectScrollbar {element: ul.dropdown-menu.inner.show.ps, settings: {…}, containerWidth: 0, containerHeight: 0, contentWidth: 0, …}

In inspect I can see classes ps__rail-x added to the elements, but on shown the .update() removes them.

What have I missed? Thanks.