Text input inside radio button group loses focus in Firefox when clicked

Question

I'm having a problem in Firefox where if you click the <input type="text"> in Firefox, the focus is diverted immediately to the Radio button sibling.

The behavior works as intended in Chrome. Do I need extra Javascript to fix this up?

Here's the JsFiddle

Answer 1

Seems like Firefox is actually doing the correct thing according to the W3C:

If the for attribute is not specified, but the label element has a labelable element descendant, then the first such descendant in tree order is the label element's labeled control.

Your label is wrapping two input elements, so when you click in the text box, the radio (the first such descendant in tree order) receives focus.

Results will vary depending on how the browser has implement this rule, so to ensure cross-browser results yes, you'd need JavaScript to step in.

Answer 2

From MDN:

Permitted content: Phrasing content, but no descendant label elements. No labelable elements other than the labeled control are allowed.

Basically, putting two inputs within a label is not valid markup. Change your html markup so that the label only wraps the radio input (and any text label)...

<label class="radio">
    <input type="radio" name="requestfor" id="optionsRadios2" value="someoneelse" />
    Behalf of
</label>      
<input type="text" name="behalfof" id="behalfid"/>

...and then use javascript (or in my lazy case, jQuery) to select the radio:

$('#behalfid').click(function(){
    $('#optionsRadios2').trigger('click');
});

Here's the fiddle.