Google Chrome breaks when onfocus sets select size

Question

The following javascript to resize a select list breaks in Google Chrome. It works when tabbing into the field, but clicking on it results in the "Aw, Snap!" error page.

<select onfocus="this.setAttribute('size', 3);">
<option>selectList with onfocus</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>

Works fine in FF and IE. It's some kind of conflict between onfocus (there's no problems if I implement it onClick) and setting the size attribute. I'm told it breaks in Safari too.

Any assistance, ideas or workarounds are greatly appreciated.

(P.S. Yeh I know it's not very nice form to resize a select list, but it's what the boss/client wants)

Answer 1

Change the line with the select to this:

<select onfocus="var that = this; setTimeout(function() {that.setAttribute('size', 3);}, 0);">

It works for me in Chrome. I haven't tried in Safari but I suspect it will work as well. Basically all we do here is escaping the call stack with setTimeout, which appears to get around the bug in Webkit.

Answer 2

I also found this:

• http://code.google.com/p/chromium/issues/detail?id=4579
• http://bugs.webkit.org/show_bug.cgi?id=17648

So it seems this is a WebKit issue and for some reason they don't want to fix it (make it standards-compliant).

Answer 3

As far as I can tell, Google Chrome ignores ALL select size attributes for multiple select boxes.

See link:

http://www.w3schools.com/TAGS/tryit.asp?filename=tryhtml_select_size

Use any other browser, then try Google Chrome. Just basic HTML attributes completely ignored by Chrome.