Selecting scroll bar in IE 11 closes Select List

[Only1MrAnderson]

When selecting the scroll bar in IE 11 the drop down closes. Only can scroll with wheel
http://jsfiddle.net/8rmjymtr/5/ - borrowed jsfiddle from another issue to highlight the problem,

[RomanoCodes]

I can confirm, this is definitely an issue for me, too.
Not using multi-selects and doing away with this line (https://github.com/Dogfalo/materialize/blob/master/dist/js/materialize.js#L3359) kind of solves the issue, but causes another when clicking away from an open select box.

[RomanoCodes]

I've added this directly to materialize.js (which you should instead add to your own include/script/override to not be horrible):

$newSelect.on('focusout', function() { 
  $(this).trigger('close');  
});  

Also in materialized.js I've updated the following binding to this:

  $newSelect.on('blur', function() {
    if (!multiple && !isIE()) {
      // Override: fixes IE select scroll closing issue, breaks multi-selects
      $(this).trigger('close');	
    }
    options.find('li.selected').removeClass('selected');
  });

Terrible hacks... but maybe someone else can see what is going on and make a more elegant fix/solution.

[fega]

@Romanulus @AAAnderson7301 Could someone check if this is still an issue?

[RenaldasK]

The issue is still present in IE11. I'm using v0.98.0

[adodoh]

in materialize.js , find it >

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

and append this >

   //(1) mouse range
  var onMouseDown = function (e) { 
      // preventing the default still allows the scroll, but blocks the blur.
      // We're inside the scrollbar if the clientX is >= the clientWidth.
      if (e.clientX >= e.target.clientWidth || e.clientY >= e.target.clientHeight) {
          e.preventDefault();
      }
  };

$newSelect.on('mousedown', onMouseDown);

  //(2) UL>LI 的 mouse click to close select
  options.find('span').on('click', function () {
      $newSelect.trigger('close');
  }); 

---

try it

[Dogfalo]

Fixed in v1-dev

[frostless]

is it possible to know which commit is responsible for the fix?

[vonBarbarosa]

hey @frostless, I'm currently struggling with this issue, and I think you won't find an exact commit, as @Dogfalo commented here, they reimplemented this component, so probably it's not possible to simply copy the piece of code and paste it

[frostless]

Many above methods work, but if we do e.preventDefault(); then we lose the browser typing context ability. I mean if you type a letter, the select wont go to the item anymore, any workaround with this?