Focus issues (icheck v2.0 rc1)

[pi7dets]

Hi

Checking version v2.0 rc1

1. Click issue Click label - focus set Click checkbox or radio input - focus not works
2. Click TAB, focus works only for checkbox, but not for radio

[thesainthell]

What I figured out was - while using the arrow key up/down to navigate between the different radio elements, everything works like expected but if we use the TAB key to do so (regular behavior for regular form elements) no focus state is triggered (chrome) and no checked state is set correctly.

Hope this helps a bit.

[rwhepburn]

I believe the issue here is that when you TAB to a set of radio elements, iCheck should not set the checked state for the first radio button element.

The default behavior in all the browsers I have seen is to only check the radio button in a set if you press the spacebar when a radio button is focused.

Aside: Automatically checking the first radio button in the set has some adverse effects when you are trying to use a data-binding framework like Knockout JS with iCheck. This is actually what led me to discover this issue.

The fix for me was to modify the following line of code in the operate function to not set the checked state when tabbing to a radio button:

if (self.type == 'checkbox' && event.keyCode == 32 && settings.keydown || 
    self.type == 'radio' && !self.checked && event.keyCode != 9) {
  operate(self, parent, key, 'click', false, true); // 'toggle' method
}

I'm really thinking this should be incorporated into the iCheck framework. Happy to submit a PR if people agree?