asked on Select list doesn't render or freezes when using onchange in IE10
I've got the following HTML in an IE10 browser (below)
When clicking in the upper left <select> to trigger its "onchange", I expect the upper right select list to change its second row of text, using JavaScript.
However, this does not work OK.
With my first click, the onchange function executes correctly, but the upper right select does not re-render at all. Nothing happens.
Succeeding clicks does change the upper right select list, but the rendering seems to be "one click behind". Subsequently moving the mouse over the second select field seems to trigger its rendering.
The lower <select> is even worse. Its onchange function is supposed to change the content of a row in the very same select list, itself.
When clicking to trigger the event, the select list "freezes" and becomes completely unresponsive, until I've moved focus to any other field (i.e. the upper select lists) and starts all over again.
In IE9 (and other browsers like Chrome, Firefox, IE8 etc) all works OK, just as expected.
But IE10 executes really annoyingly!
Any ideas?
Right now I'm testing with IE10 version 10.0.9200.16576
Does anybody get the above behaviour with other IE10 versions?
When clicking in the upper left <select> to trigger its "onchange", I expect the upper right select list to change its second row of text, using JavaScript.
However, this does not work OK.
With my first click, the onchange function executes correctly, but the upper right select does not re-render at all. Nothing happens.
Succeeding clicks does change the upper right select list, but the rendering seems to be "one click behind". Subsequently moving the mouse over the second select field seems to trigger its rendering.
The lower <select> is even worse. Its onchange function is supposed to change the content of a row in the very same select list, itself.
When clicking to trigger the event, the select list "freezes" and becomes completely unresponsive, until I've moved focus to any other field (i.e. the upper select lists) and starts all over again.
In IE9 (and other browsers like Chrome, Firefox, IE8 etc) all works OK, just as expected.
But IE10 executes really annoyingly!
Any ideas?
Right now I'm testing with IE10 version 10.0.9200.16576
Does anybody get the above behaviour with other IE10 versions?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<html>
<head>
<script>
function SetList(field) {
var now = new Date();
field.options[1].text = 'set '+now.getTime();
}
</script>
</head>
<body>
<form name=TheForm>
Test 1 (set next field):
<select size=3 onChange="SetList(document.TheForm.Test1)">
<option selected>First row
<option>Click to set value in list to the right
<option>Third row
</select>
<select size=3 name=Test1>
<option selected>Choice 1
<option>Choice 2
<option>Choice 3
</select>
<br><br>
Test 2 (set itself):
<select name=Test2 size=3 onChange="SetList(document.TheForm.Test2)">
<option selected>First row
<option>Click to set value in same list
<option>Third row
</select>
</body>
</html>
Web BrowsersHTMLJavaScript
Last Comment
Stefan Lennerbrant
I have fetch same problem somewhere but I forgot what i did exactly I think it was solved using addEventListener.
Again I want to refer you to microsoft :
http://support.microsoft.com/kb/319741
http://support.microsoft.com/kb/319741
ASKER
The MS KB link seems to refer to a bug in IE6, specifically relating to a "frameset situation"
Just for the sake of it, I tested by using addeventlistener to set all the event handlers to the select fields, but the problem was the same.
Anyhow, isn't there anyone that can actually repeat the issue using my HTML code above on an IE10 browser - resulting in "delayed rendering" of the upper select lists and freezing the lower select list?
Is there anybody that can make the page "work" correctly, just as it does in IE9 and other browsers?
Just for the sake of it, I tested by using addeventlistener to set all the event handlers to the select fields, but the problem was the same.
Anyhow, isn't there anyone that can actually repeat the issue using my HTML code above on an IE10 browser - resulting in "delayed rendering" of the upper select lists and freezing the lower select list?
Is there anybody that can make the page "work" correctly, just as it does in IE9 and other browsers?
SOLUTION
THIS SOLUTION ONLY AVAILABLE TO MEMBERS.
View this solution by signing up for a free trial.
Members can start a 7-Day free trial and enjoy unlimited access to the platform.
ASKER
Thanks, RainerJPos, adding blur() seems to be a step in the right direction.
It still doesn't seem to solve the case with the two upper select lists (where IE10 does "delayed rendering") but it does avoid the freezing of the lower select list.
Instead adding focus() to explicitly set focus to another field, seems to solve the issue completely.
I will experiment more with this, but blur/focus really seems to be the fix here, for IE10.
I'll report back after more testing.
Does anybody know about this IE10 problem? Is it a known bug? I haven't found much on the internet...
It still doesn't seem to solve the case with the two upper select lists (where IE10 does "delayed rendering") but it does avoid the freezing of the lower select list.
Instead adding focus() to explicitly set focus to another field, seems to solve the issue completely.
I will experiment more with this, but blur/focus really seems to be the fix here, for IE10.
I'll report back after more testing.
Does anybody know about this IE10 problem? Is it a known bug? I haven't found much on the internet...
ASKER CERTIFIED SOLUTION
THIS SOLUTION ONLY AVAILABLE TO MEMBERS.
View this solution by signing up for a free trial.
Members can start a 7-Day free trial and enjoy unlimited access to the platform.
ASKER
Using blur and re-focus is half the solution.
Removing border from style is half the solution
Oh My, what should one without IE?
Removing border from style is half the solution
Oh My, what should one without IE?