1

I'm using the Materialize CSS framework to build a simple form. The form has select item that works great everywhere except IE11. In IE, when a scrollbar appears in the select box, it closes when a user tries to move it. Users can scroll the box with a mouse wheel and make a selection, but any click on the scroll bar and the select closes. I've spent hours looking for a solution to this issue, and I don't think its strictly related to Materialize. Any insight to this issue is greatly appreciated.

jQuery: 

$(document).ready(function() {
  $('select').material_select();
});

HTML:

<div class="container">
<div class="input-field" id="hear_about">
  <select>
       <option value="" disabled selected>How Did You Hear About Us?</option>
       <option value="Radio">Radio</option>
       <option value="Television">Television</option>
       <option value="Web Search">Web Search</option>
       <option value="Email">Email</option>
       <option value="On Track">On Track</option>
       <option value="Print Ad">Print Ad</option>
       <option value="Friend/Referral">Friend/Referral</option>
       <option value="Online Ad">Online Ad</option>
       <option value="Social Media">Social Media</option>
    </select>
  <label for="hear_about">How Did You Hear About Us?</label>

</div>
</div>

Fiddle: https://jsfiddle.net/f4t8trL7/

RPM
  • 133
  • 3
  • 20
  • related : https://stackoverflow.com/questions/2023779/clicking-on-a-divs-scroll-bar-fires-the-blur-event-in-i-e , maybe one of the answers could help – Taki May 01 '18 at 14:39
  • @Taki I've tried a couple of the methods suggested there with no success. – RPM May 01 '18 at 17:18

0 Answers0