1

Unfortunately the limited height <select> dropdown crashing when clicked in dropdown in Internet Explorer 11 (IE11) which use onmousedown, onchange and onblur 

<select name="select1" onmousedown="if(this.options.length>8){this.size=8;}" onchange="this.size=0;" onblur="this.size=0;">

enter image description here

Demo: https://codepen.io/anon/pen/LBveJp

<select name="select1" onmousedown="if(this.options.length>8){this.size=8;}" onchange="this.size=0;" onblur="this.size=0;">
  <option value="">0001</option>
  <option value="">0002</option>
  <option value="">0003</option>
  <option value="">0004</option>
  <option value="">0005</option>
  <option value="">0006</option>
  <option value="">0007</option>
  <option value="">0008</option>
  <option value="">0009</option>
  <option value="">0010</option>
  <option value="">0011</option>
  <option value="">0012</option>
  <option value="">0013</option>
  <option value="">0014</option>
  <option value="">0015</option>
  <option value="">0016</option>
  <option value="">0017</option>
  <option value="">0018</option>
  <option value="">0019</option>
  <option value="">0020</option>
  <option value="">0021</option>
  <option value="">0022</option>
  <option value="">0023</option>
  <option value="">0024</option>
  <option value="">0025</option>
  <option value="">0026</option>
  <option value="">0027</option>
  <option value="">0028</option>
  <option value="">0029</option>
  <option value="">0030</option>
  <option value="">0031</option>
  <option value="">0032</option>
  <option value="">0033</option>
  <option value="">0034</option>
  <option value="">0035</option>
  <option value="">0036</option>
  <option value="">0037</option>
  <option value="">0038</option>
  <option value="">0039</option>
  <option value="">0040</option>
  <option value="">0041</option>
  <option value="">0042</option>
  <option value="">0043</option>
  <option value="">0044</option>
  <option value="">0045</option>
  <option value="">0046</option>
  <option value="">0047</option>
  <option value="">0048</option>
  <option value="">0049</option>
  <option value="">0050</option>
  <option value="">0051</option>
  <option value="">0052</option>
  <option value="">0053</option>
  <option value="">0054</option>
  <option value="">0055</option>
  <option value="">0056</option>
  <option value="">0057</option>
  <option value="">0058</option>
  <option value="">0059</option>
  <option value="">0060</option>
  <option value="">0061</option>
  <option value="">0062</option>
  <option value="">0063</option>
  <option value="">0064</option>
  <option value="">0065</option>
  <option value="">0066</option>
  <option value="">0067</option>
  <option value="">0068</option>
  <option value="">0069</option>
  <option value="">0070</option>
  <option value="">0071</option>
  <option value="">0072</option>
  <option value="">0073</option>
  <option value="">0074</option>
  <option value="">0075</option>
  <option value="">0076</option>
  <option value="">0077</option>
  <option value="">0078</option>
  <option value="">0079</option>
  <option value="">0080</option>
  <option value="">0081</option>
  <option value="">0082</option>
  <option value="">0083</option>
  <option value="">0084</option>
  <option value="">0085</option>
  <option value="">0086</option>
  <option value="">0087</option>
  <option value="">0088</option>
  <option value="">0089</option>
  <option value="">0090</option>
  <option value="">0091</option>
  <option value="">0092</option>
  <option value="">0093</option>
  <option value="">0094</option>
  <option value="">0095</option>
  <option value="">0096</option>
  <option value="">0097</option>
  <option value="">0098</option>
  <option value="">0099</option>
  <option value="">0100</option>
  <option value="">0101</option>
  <option value="">0102</option>
  <option value="">0103</option>
  <option value="">0104</option>
  <option value="">0105</option>
  <option value="">0106</option>
  <option value="">0107</option>
  <option value="">0108</option>
  <option value="">0109</option>
  <option value="">0110</option>
  <option value="">0111</option>
  <option value="">0112</option>
  <option value="">0113</option>
  <option value="">0114</option>
  <option value="">0115</option>
  <option value="">0116</option>
  <option value="">0117</option>
  <option value="">0118</option>
  <option value="">0119</option>
  <option value="">0120</option>
  <option value="">0121</option>
  <option value="">0122</option>
  <option value="">0123</option>
  <option value="">0124</option>
  <option value="">0125</option>
  <option value="">0126</option>
  <option value="">0127</option>
  <option value="">0128</option>
  <option value="">0129</option>
  <option value="">0130</option>
  <option value="">0131</option>
  <option value="">0132</option>
  <option value="">0133</option>
  <option value="">0134</option>
  <option value="">0135</option>
  <option value="">0136</option>
  <option value="">0137</option>
  <option value="">0138</option>
  <option value="">0139</option>
  <option value="">0140</option>
  <option value="">0141</option>
  <option value="">0142</option>
  <option value="">0143</option>
  <option value="">0144</option>
  <option value="">0145</option>
  <option value="">0146</option>
  <option value="">0147</option>
  <option value="">0148</option>
  <option value="">0149</option>
  <option value="">0150</option>
</select>
Mo.
  • 26,306
  • 36
  • 159
  • 225
  • 1
    What's the question? – Jeremy Thille Aug 14 '18 at 11:58
  • @JeremyThille Crashing browser once clicked on drowpdown item – Mo. Aug 14 '18 at 12:01
  • 2
    It is very unclear what you are asking for. You are showing Plain HTML and javascript, While in a comment you say you are using AngularJS. – Rafael Herscovici Aug 14 '18 at 12:07
  • I would suggest trying `onfocus` instead of `onmousedown` for better UX – TryingToImprove Aug 14 '18 at 12:11
  • If your code is actually in an AngularJS app then you need to provide the code for that as the code you show works as intended and doesn't cause a crash. – Patrick Evans Aug 14 '18 at 12:11
  • @PatrickEvans Based on the investigation it happen in pure javaScript. That is why put the same code in codepen – Mo. Aug 14 '18 at 12:14
  • @Dementic it happens to even in pure javascript that is why not putting the AngularJS code – Mo. Aug 14 '18 at 12:15
  • @Muhammed i can not replicate the issue,it works fine on my side with the code provided. I would guess you have plugins/system limits that are causing the issue. If you were to post the original code in AngularJS, There might be a different issue which the community could help you investigate. – Rafael Herscovici Aug 14 '18 at 12:31
  • Then I would say more than likely there is something wrong with your OS, IE, and/or even your hardware. Expand the error report and see what module it lists as causing the crash (though i doubt that will help much). Uninstall IE and reinstall (in "Turn Windows Features on or off" settings window) see if that helps, do a `sfc /scannow`, make sure all your hardware is working properly (ie drive is free of bad sectors, ram is seated/working properly, cpu isn't overheated etc). – Patrick Evans Aug 14 '18 at 12:33
  • @PatrickEvans Other IE11 devices also have the issue, The issue happens only on version **11.00** rest of the IE11 related versions are okay – Mo. Aug 14 '18 at 12:35
  • Codepen refuses to be displayed in IE11. It says we should use Full Page View, but the owner of the Pen (you) must be a pro member for that. – Jeremy Thille Aug 14 '18 at 13:51

1 Answers1

0

Make your listeners passive.

I'm not so sure but try to attach those listeners using Javascript, instead of doing it directly in HTML and then make those listeners passive. That might fix your issue. Read more about passive event listening here.

UtkarshPramodGupta
  • 7,486
  • 7
  • 30
  • 54
  • Actually the crashing happening in AngularJS for ` – Mo. Aug 14 '18 at 12:07
  • [Passive event listener opiton isn't supported in IE](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#Browser_compatibility) – Patrick Evans Aug 14 '18 at 12:08
  • @UtkarshPramodGupta passive also gives same crash `elem.bind('mousedown', () => { scope.expandHeight(); });` – Mo. Aug 14 '18 at 12:31