asked on

Hanging IE11 when changing "self" select field in onChange event handler

Can somebody repeat this behaviour, with the code below?
When changing selection in the select list, using the mouse, the event handler modifies the content of one of the select options.

This "hangs" IE11 such that it is not possible to click any more, to change selection. The select field completely "freezes".
It only happens with "multiple row" select fields (like size=3)

Using the keyboard to change selection however works OK.
And of course it works ok in other browsers :-)

So 1) can anybody repeat this in IE11?
and 2) can anybody think of an explanation of the behaviour, or any workaround?

<!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 (set itself):
<select name=Test size=3 onChange="SetList(document.TheForm.Test)">
  <option selected>First row
  <option>Click to set value in the list
  <option>Third row
</select>
</form>
</body>
</html>

Open in new window

Thanks

Big Monty

first thing you need to do it always close your html values in single or double quotes, otherwise it is invalid markup, and could cause browsers to act not as expected. You are also using now as a variable, and it is a javascript keyword, so you'll want to use another variable name.

Second, in your javascript function, you need to match up either the text attribute or value attribute, and it looks like you're trying to match up a unique date time stamp, thats why it isnt working.

if you want to add a new option, you could do something like this:

<script>
function SetList(field) {
    var strNow = new Date();
   
    var option = document.createElement("option");
    option.text = 'set '+strNow.getTime();
    field.add(option);
}
</script>

Open in new window

with all that said, what exactly are you trying to accomplish?

leakim971

Work for me : http://jsfiddle.net/Yw8ur/

<!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].innerHTML = 'set '+now.getTime();
		}
	</script>
</head>
<body>
	<form name=TheForm>
		Test (set itself):
		<select name="Test" size="3" onChange="SetList(this)">
			<option selected='selected'>First row</option>
			<option>Click to set value in the list</option>
			<option>Third row</option>
		</select>
	</form>
</body>
</html>

Open in new window

Stefan Lennerbrant

ASKER

@BigMonty, thanks for your input.

Well yes, my submission is an extremely simplified sample to show the problem in as few lines of html code as possible.
The use of timestamps etc, is just to make it really easy to see, on the screen, that the option text is actually updated.

In the "real world", we are modifying the contents of one select field (both value and text of the option[]), based on changes in another select field.
As the very same type of hanging/freezing happens when working with one single select field, I choose to use this one-select-field version to show the problem to the EE community.

Your input is intresting, but maybe a little bit beside the point.
You're of course right in "quoting attributes" and "not using now", but I do not think(?) these issues affect the problem at hand.

I do not really want to add options to the list, but instead to modify an existing option.
But I'll look into your suggestion of creating a standalone option element, and then replace the existing option element in the select list.

However, it really should (right?) work with modifying the option with field.options[1].text='xxx' (and corresponding .value='xxx')
Shouldn't it? It works ok in all non-IE browsers, and in older IE version (however IE10 has some problems as well, that however can be handled with workarounds)

So for one thing I just want to solve the issue at hand. And I'll check your suggestion!
On the other hand, I'd like to know what the xyz! is going on with IE11 - why does it not work with the "plain vanilla method" that I use?

Stefan Lennerbrant

ASKER

@leakim971, this was promising

By changing to set option[].innerHTML instead of setting option[].text, it works OK in IE11
I also need to set option[].value (not included in my simple sample) but that has never been a problem - its updating option[].text that freezes IE11.

This may very well be the soluton! Thanks.

However, I cannot avoid thinking that setting innerHTML seems to be quite "hacky" compared to setting text.
As this hopefully works on all browsers (I'll check) I'll change the entire system to start using innerHTML instead. But sheesh, all this trouble just to make IE11 happy?

What do you think/guess; is this a bug in IE11 or am I doing something odd/forbidden by updating the option[].text like this?

Michel Plungjan

A lot of variations on a theme - I would personally never use .add or .innerHTML

I do not see any problems with quotes, variable names or the usage of text

Can you post the actual non-working code in a jsfiddle.net

I have a suspicion there is more going on. For example the doctype is ancient

Here is how I would have coded it using your example avoiding form names and field names completely

can you test it in IE11? http://jsfiddle.net/mplungjan/JKSRY/show

I do see an issue in IE10, that I need to click away to see the update if I click on option[1] - that suggests to me that it is the onchange handler and multiple that might be an issue

<!DOCTYPE html>
<html>
<head>
<script>
function SetList(sel) {
  var now = new Date();
  sel.options[1].text = 'set '+now.getTime();
}
</script>
</head>
<body>
<form>
Test (set itself):
<select name="Test" size=3 onChange="SetList(this)">
  <option selected>First row
  <option>Click to set value in the list
  <option>Third row
</select>
</form>
</body>
</html>

Open in new window

Michel Plungjan

So running this again, I see in IE10 that it is not freezing, it just does not update until you click outside the sel. This only happens when you click the options[1] itself.

It seems to be how IE works with onchange and nothing more.

A simple workaround would be to make the select a set of radio boxes or use the click event

This works (note I gave the sel an ID)

http://jsfiddle.net/mplungjan/xd4Y2/show/

window.onload=function() { 
  var sel = document.getElementById("Test");
  sel.onclick=function() {
    var now = new Date();
    this.options[1].text = 'set '+now.getTime();
  }      
}

Open in new window

Stefan Lennerbrant

ASKER

@mplungjan, the freeze in IE11 happens with the exact 21 rows of html used in my initial submission of this case. Please test, if possible.

FYI, the same freeze in IE11 happens when using your exact html (using html5 doctype etc)

Yes, there are some problems with IE10 as well. And more so when using two select fields that "modify eachother" (I use this simple one-single-select-field to simplify the question)

However, that IE10 bug can be fixed with a workaround where I loose focus on the field initiating the change, using blur(), and then re-sets focus to the field again using a setTimeout() with 1 millisecond delay. Not very beautiful but OK (I detect IE10 and do that voodo magic only then)

So yes, IE10 is "broken" as well, but IE11 is even worse. With IE11 it does not help with the blur+focus method that fixed the bug(?) in IE10

So right now the innerHTML method is maybe one possible way to go...
But I'm not happy :-)
And I'm still very curious :-)

Michel Plungjan

Please try my latest code from https://www.experts-exchange.com/questions/28379666/Hanging-IE11-when-changing-self-select-field-in-onChange-event-handler.html?anchorAnswerId=39906414#a39906414

Stefan Lennerbrant

ASKER

@mplungjan, the reason that your suggestion works, is that you use onClick instead of onChange

With onClick, all configuration work OK - it's only when using onChange that IE11 freezes
Of course, with onClick the handler is not triggered when selecting choices with the keyboard, so that's a method that is not possible to use.

A similar freeze happens with IE10, but there it can be handled by "clicking on the document background" (i.e. loosing focus on the field) - just as somebody commented above.
Then IE seems to "release the freeze" such that it's possible to click once again in the field (and then one needs to loose focus again, etc).
However, that situation can be handled programatically (blur:ing and focus:ing in the onChange event handler), so for IE10 there is a workaround to "fix" the bug.

In IE11 it's actually possible to "release the freeze" as well, but one then MUST use the keyboard to "tab away" from the select field, and then back again.
Clicking the mouse to loose focus is not enough. Thus, the blur+focus JavaScript workaround is not a solution for IE11, as it is for IE10.

Do note, also, that using they keyboard to trigger onChange always works. It's only the combination mouse-click + onChange that makes IE10 and IE11 freeze - and for IE11 I've got no workaround, yet :-(

Right now, the ONLY method to handle this, as discussed in this thread, seems to be to use innerHTML to change the <option> "text" content. This might be the way to do it, but it's quite hacky...
(also there are many bug reports on IE, warning for using innerHTML on select elements, but maybe that's all old news that is fixed in recent IE versions...)

Thankful for any further input...

Stefan Lennerbrant

ASKER

...update/correction to my most recent comment:

In IE10 there is not a freeze in this particular one-single-select-field example, but the list does not refresh/update with the new value. In a two-select-fields-case there is a freeze in IE10 as well.

The key fact here is, however, that there are "problems" with IE10 (refresh and/or freeze) that can be handled, with Javascript, by blur:ing and re-focus:ing the field.
With IE11 it's a freeze problem in all situations, and it cannot be handled with blur+focus.

Stefan Lennerbrant

ASKER

Yet another update...

I happened to stumble over an IE11 build 16384 on Windows 8
There everything works ok, in all situations.
Either the old 16384 isn't buggy, or the Windows8 environment itself makes it work

On Windows 7 with IE11 build 16518, it doesn't work, anyhow. I also tested Win7 with IE11 build 16428, which has the same bug.
And that's of course the great problem...

ASKER CERTIFIED SOLUTION

Stefan Lennerbrant

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Stefan Lennerbrant

ASKER

This fixed the problem in IE11
It also worked for IE10 such that the workaround with "timed out" blur+focus is no longer needed there

Hanging IE11 when changing &quot;self&quot; select field in onChange event handler

Hanging IE11 when changing "self" select field in onChange event handler