Question

Take a look at this sample: http://jsbin.com/imivek/1/edit

Clicking the text field, which is part of the label, behaves oddly in Firefox (tested in v17.0.1):

• Clicking it once will give it focus for a very brief period of time, after which the focus moves to the radio button.
• Clicking it twice shortly after each other will maintain focus.
• Focusing it by other means (f.e. tab) will work fine and as expected.
• Handling the text field’s click event and preventing it from bubbling up (e.stopPropagation() in jQuery terms) doesn’t change anything.

Who can explain this behavior and recommend how to best work around it?

Answer 1

You may have only one form control inside a label. You have two. Your HTML is invalid so weird behaviour is to be expected as browsers attempt to compensate for your mistake.

Clicking it once will give it focus for a very brief period of time, after which the focus moves to the radio button.

You clicked on the label. That sets the focus to the radio button (since the label appears to be a label for it).

Clicking it twice shortly after each other will maintain focus.

Probably some sort of error recovery

Focusing it by other means (f.e. tab) will work fine and as expected.

You aren’t clicking the label then

Handling the text field’s click event and preventing it from bubbling up (e.stopPropagation() in jQuery terms) doesn’t change anything.

It is native functionality, not scripted functionality.

Write valid HTML.