0

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.

luizamunk
  • 7
  • 1
  • 5
user7348784
  • 83
  • 9

2 Answers2

1

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');
});
Leo von Barbarosa
  • 727
  • 8
  • 22
0

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');
}
user7348784
  • 83
  • 9
  • Could you clarify better this solution? I tried this on Materialize v0.97.7 and v0.100.2, but the variable `e` is not defined on such scope... – Leo von Barbarosa Jul 02 '18 at 13:37