I am using knockout js and I have some switches that I have applied snapping hasFocusto so that I can track which control has focus. But this does not work for switches.
You can check what happens in this fiddle:
https://jsfiddle.net/qttxfvqs/1/
The focus of the observed text field works fine, but the radio buttons don't. I get even weirder results if there are only 2 switches.
Html:
<div><input type="text" data-bind="hasFocus: textFocus" /></div>
<div>
<label for="option1">
<input type="radio" id="option1" name="options" value="option1" data-bind="hasFocus: radioFocus" checked />
Option 1
</label>
</div>
<div>
<label for="option2">
<input type="radio" id="option2" name="options" value="option2" data-bind="hasFocus: radioFocus" />
Option 2
</label>
</div>
<div>
<label for="option3">
<input type="radio" id="option3" name="options" value="option3" data-bind="hasFocus: radioFocus" />
Option 3
</label>
</div>
<hr />
<dl>
<dt>Text box has focus</dt>
<dd data-bind="text: textFocus">-</dd>
<dt>Radio buttons have focus</dt>
<dd data-bind="text: radioFocus">-</dd>
</dl>
JS:
var m = function() {
this.textFocus = ko.observable(true);
this.radioFocus = ko.observable(false);
};
ko.applyBindings(new m());
How to fix it? I want it to radioFocusbe right if any of the switches has focus, otherwise false.
BG100