Bug in Internet Explorer 8 prevents "label for" on secondary radio buttons

Found an interesting bug (and solution) that I'd love to share with you today.

Having a razor view produce output similar to the below:

<input type="radio" id="ParentCollection_0__ChildCollection_1__1" .../><label for="ParentCollection_0__ChildCollection_1__1">...</label>
<input type="radio" id="ParentCollection_0__ChildCollection_1__2" .../>
<label for="ParentCollection_0__ChildCollection_1__2">...</label>

... a colleague of mine testing the web app found, that the second label (ParentCollection_0__ChildCollection_1__2) did not cause the corresponding radio button to be checked. Trying the same view in Chrome and Firefox worked flawlessly, however. It turned out, that somehow, Internet Explorer found the ID-field too long, causing it to ignore it (go figure). Anyway, the problem was solved with shortening the ID as such:

Dim radioId = ViewData.TemplateInfo.GetFullHtmlFieldId(valueCounter)
' Bug i IE8 won't let your label hit, if its target ID is too long
radioId = radioId.    Replace("ParentCollection_", "p").    Replace("__ChildCollection_", "c")

Then, I simply use the generated Id as the id of my radio button and as the target of my label (like before):

Dim attributes = New Dictionary(Of String, Object) From {{"id", radioId}}...@Html.RadioButtonFor(Function(Model) Model.Response, radioValue, attributes)<label for="@radioId">...</label>

And behold! The mark-up works, even in IE 8 ;-)

Comments

Popular posts from this blog

Auto Mapper and Record Types - will they blend?

Unit testing your Azure functions - part 2: Queues and Blobs

Testing WCF services with user credentials and binary endpoints