If a SELECT MULTIPLE element gives away focus in its OnFocus handler, IE7+ becomes very confused about where the focus really is.


<INPUT TYPE=TEXT>
<SELECT MULTIPLE ONFOCUS="this.previousSibling.focus()"><OPTION>a<OPTION>b</SELECT>
<INPUT TYPE=TEXT>

Clicking back and forth between the two text fields freely moves focus back and forth. However, if the select list is clicked focus appears to be in the first text field (indicated by the blinking caret), but clicking in the second text field doesn't move focus there. Even clicking on window elements (other tabs, the refresh button, the address bar, ...) does nothing. Further examination indicates that all page clicks are now trapped by the select list's OnClick handler. The only way to fix this is to move focus away from the window completely (alt-tab) or refresh the page using the keyboard (F5).

One workaround is to use OnBeforeActivate instead of OnFocus, and ensure that the select object never gets focus (by returning false).


<INPUT TYPE=TEXT>
<SELECT MULTIPLE ONBEFOREACTIVATE="this.previousSibling.blur();this.previousSibling.focus();return false"><OPTION>a<OPTION>b</SELECT>
<INPUT TYPE=TEXT>

The call to blur() is needed to make the call to focus() work when focus is currently coming from the first input field.