Inconsistent radio input “focus” behaviour

The other day I was investigating some odd behaviour in a form. Users were clicking the text label next to a radio input (which if set up correctly selects that radio input) but were then unable to use the Enter key to submit the form.

This contradicts with the idea that if a user’s browser focus is on a form input, the Enter key will submit that form. Here’s HTML for a basic form with two radio inputs:

<form method="post" action="#">
    <fieldset>
        <input type="radio" name="gender" id="gender-male" value="gender-male" checked="checked">
        <label for="gender-male">Male</label>
        <input type="radio" name="gender" id="gender-female" value="gender-female">
        <label for="gender-female">Female</label>
    </fieldset>
    <button type="submit">Submit Form</button>
</form>

Here’s the output. Note how both the radio input itself or the text label can be clicked to select a radio: In the same way users can click in the Google search box and press the Enter, I would expect a form to submit with the Enter key after selecting a radio input, to match the behaviour of other form inputs (with the exception of <textarea> in which Enter triggers a line-break). However my testing on this behaviour threw up some surprising results:

Browser Operating System Test: Click radio then Enter Test: Click label then Enter Test: Tab to radio then Enter
Chrome Stable 29.0.1547.76 OSX 10.8.5 Doesn’t Submit Doesn’t Submit Submits
Chrome Canary 31.0.1640.2 OSX 10.8.5 Submits Submits Submits
Firefox 24.0 OSX 10.8.5 Doesn’t Submit Submits Submits
Opera 16.0.1196.73 OSX 10.8.5 Doesn’t Submit Doesn’t Submit Submits
Safari 6.0.5 OSX 10.8.5 Doesn’t Submit Doesn’t Submit Submits
Internet Explorer 10.0.9200.16686 Windows 7 Professional SP1 Submits Submits Submits
Chrome Stable 29.0.1547.76 Windows 7 Professional SP1 Doesn’t Submit Doesn’t Submit Submits
Firefox 24.0 Windows 7 Professional SP1 Submits Submits Submits
Opera 16.0.1196.73 Windows 7 Professional SP1 Doesn’t Submit Doesn’t Submit Submits
Internet Explorer 8.0.6001.18702 Windows XP Professional SP3 Submits Submits Submits
Chrome Stable 29.0.1547.76 Windows XP Professional SP3 Doesn’t Submit Doesn’t Submit Submits
Firefox 24.0 Windows XP Professional SP3 Submits Submits Submits
Opera 16.0.1196.73 Windows XP Professional SP3 Doesn’t Submit Doesn’t Submit Submits

Things to note from these results:

  • Chrome Canary and Chrome Stable on the same OS have different behaviour. Is Google in the process of changing this behaviour in their browser?
  • Firefox on Windows and Firefox on OSX have different behaviour. Is this a bug or a conscious decision?
  • The browser behaviour of clicking a radio input or the text label is inconsistent, but if tabbed to these radio inputs are correctly “focused” and the form submitted upon Enter.

Has anyone else experienced this in their work? Can anyone explain these inconsistencies?

Leave a Reply