Solved

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

Posted on 2014-03-04
13
2,420 Views
Last Modified: 2014-05-25
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
0
Comment
Question by:stefanlennerbrant
13 Comments
 
LVL 32

Expert Comment

by:Big Monty
Comment Utility
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?
0
 
LVL 82

Expert Comment

by:leakim971
Comment Utility
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

0
 

Author Comment

by:stefanlennerbrant
Comment Utility
@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?
0
 

Author Comment

by:stefanlennerbrant
Comment Utility
@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?
0
 
LVL 75

Expert Comment

by:Michel Plungjan
Comment Utility
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

0
 
LVL 75

Expert Comment

by:Michel Plungjan
Comment Utility
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

0
How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

 

Author Comment

by:stefanlennerbrant
Comment Utility
@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 :-)
0
 
LVL 75

Expert Comment

by:Michel Plungjan
Comment Utility
0
 

Author Comment

by:stefanlennerbrant
Comment Utility
@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...
0
 

Author Comment

by:stefanlennerbrant
Comment Utility
...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.
0
 

Author Comment

by:stefanlennerbrant
Comment Utility
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...
0
 

Accepted Solution

by:
stefanlennerbrant earned 0 total points
Comment Utility
FYI, I have tested (in the real application) to change all my eventhandler code looking like:
  field.options[idx].text = 'a text';
  field.options[idx].value = 'a value';

...to instead use:
  change_select_option(field, idx, 'a text', 'a value');

...and then defining:
function change_select_option(field, idx, text, value) {
    if(field.size > 1) {
      text = String(text)
                         .replace(/&/g, '&amp;')
                         .replace(/</g, '&lt;')
                         .replace(/>/g, '&gt;')
                         .replace(/"/g, '&quot;')
                         .replace(/\xa0/g, '&nbsp;');
      field.options[idx].innerHTML = text;
    }
    else {
      field.options[idx].text = text;
    }
  }
  field.options[idx].value = value;
}

Open in new window


I cannot say that I'm happy, but it does seem to work on IE11.
Any other suggestions to avoid this akward solution?
0
 

Author Closing Comment

by:stefanlennerbrant
Comment Utility
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
0

Featured Post

Highfive + Dolby Voice = No More Audio Complaints!

Poor audio quality is one of the top reasons people don’t use video conferencing. Get the crispest, clearest audio powered by Dolby Voice in every meeting. Highfive and Dolby Voice deliver the best video conferencing and audio experience for every meeting and every room.

Join & Write a Comment

I annotated my article on ransomware somewhat extensively, but I keep adding new references and wanted to put a link to the reference library.  Despite all the reference tools I have on hand, it was not easy to find a way to do this easily. I finall…
JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
Google currently has a new report that is in beta and coming soon to Webmaster Tool accounts. This Micro Tutorial will highlight new features for Google Webmaster Tools.
How to create a custom search shortcut to site-search Experts Exchange using Google in the Firefox browser. This eliminates the need to type out site:experts-exchange.com whenever you want to search the site. Launch your Bookmark Menu: Press 'Ctrl +…

772 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

9 Experts available now in Live!

Get 1:1 Help Now