Materialize select list dropdown scrollbar doesn't work properly on IE

Question

The Materialize select list dropdown closes when clicking on the scrollbar on IE, although it works fine in Chrome.

I have checked some solutions on the internet, and code below helped me to work in IE:

//Hiding the below lines in js

$newSelect.on('blur', function() {
    if (!multiple) {
      $(this).trigger('close');
    }
    options.find('li.selected').removeClass('selected');
  });

But after that, the dropdown is not closing when no options are selected (when clicking on the screen).

Can someone please help me with an idea to close that dropdown?

Thanks in advance.

Answer 1

Got a solution. Adding the below line worked for me,

$('.select-dropdown').find('span').on('click',function(){
 $newSelect.trigger('close');  
});


var container = $(".select-dropdown");
if (!multiple && !container.is(e.target))
{
   $newSelect.trigger('close');
}

Answer 2

Fasani posted a solution on the repository's issue page at GitHub:

substitute the whole $newSelect.on("blur", function() { ... } function by

$newSelect.on("blur", function() {
  var that = this;

  $(this).find(' ~ .dropdown-content span').off('click');
  $(this).find(' ~ .dropdown-content span').on('click', function() {
    $(that).trigger('close');
  });

  var containers = $(".select-dropdown");
  if (!multiple && !containers.is(e.target)) {
    $(this).trigger("close");
  }

  options.find("li.selected").removeClass("selected");
});

Unfortunatly, this solution have a downside in which the dropdown only closes if an option is selected (not if the person clicks out of the dropdown list). Personally, I guess it's worth it.

If you want to limit this "downside" to IE only, you could put a conditional like the following (based on this stackoverflow page):

var isIE = function() {
    var msie = window.document.documentMode;
    if (msie <= 11) return true;
    else return false;
}

$newSelect.on('blur', function() {
    if (isIE()){
        var that = this;

        $(this).find(' ~ .dropdown-content span').off('click');
        $(this).find(' ~ .dropdown-content span').on('click', function() {
            $(that).trigger('close');
        });

        var containers = $(".select-dropdown");
        if (!multiple && !containers.is(e.target)) {
            $(this).trigger("close");
        }

    } else {
        if (!multiple) {
            $(this).trigger('close');
        }
    }

    options.find('li.selected').removeClass('selected');
});