angularjs - Tab/focus behavior for radio buttons affected by ng-model in IE11 -
adding ng-model radio button set seems alter input gets focused when tabbing. tested ie11 (11.842.10586.0), , angular 1.6.3 (though occurs in earlier versions of angular well).
<!doctype html> <html lang="en"> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.3/angular.min.js"></script> <body> <div ng-app="myapp" ng-controller="formctrl"> <form> <input type="text" ng-model="firstname"> <br/> <input type="radio" value="1" name="radioexample" checked> <input type="radio" value="2" name="radioexample"> <input type="radio" value="3" name="radioexample"> <br/> <input type="text" ng-model="firstname"> </form> </div> <script> var app = angular.module('myapp', []); app.controller('formctrl', function($scope) { $scope.firstname = ""; $scope.radiovalue = "1"; }); </script> </body> </html> http://plnkr.co/edit/nwo7sljk4nier66t6q7w
this shows normal behavior. if radio button selected, tabbing radio button group focuses on selected radio button. if no radio button selected, tabbing forward focuses on first element, tabbing focuses on last one.
<!doctype html> <html lang="en"> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.3/angular.min.js"></script> <body> <div ng-app="myapp" ng-controller="formctrl"> <form> <input type="text" ng-model="firstname"> <br/> <input type="radio" value="1" ng-model="radiovalue" name="radioexample"> <input type="radio" value="2" ng-model="radiovalue" name="radioexample"> <input type="radio" value="3" ng-model="radiovalue" name="radioexample"> <br/> <input type="text" ng-model="firstname"> </form> </div> <script> var app = angular.module('myapp', []); app.controller('formctrl', function($scope) { $scope.firstname = ""; $scope.radiovalue = "1"; }); </script> </body> </html> http://plnkr.co/edit/vmlg7rug2kd0szlmr0lb
this shows modified behavior when ng-model added. regardless of whether radio button selected or not, tabbing forward focuses on first element, tabbing focuses on last one. behavior persists after different radio button selected manually.
i've tried using various combinations of checked/ng-checked, delaying model initialization $timeout, , using <fieldset>.
what causing , more importantly there way can make second scenario behave first 1 (focusing on selected radio button when tabbing)?
i forked "modified behavior" example on plnkr , added checked attribute first radio button. tabbing behaves in "normal behavior" example.
<input type="radio" value="1" ng-model="radiovalue" name="radioexample" checked> <input type="radio" value="2" ng-model="radiovalue" name="radioexample"> <input type="radio" value="3" ng-model="radiovalue" name="radioexample"> http://plnkr.co/edit/gbzfgkjbjyebdgb9jxho?p=preview
to reconcile differences between model , 'checked' attribute add/remove attribute when model value changes.
Comments
Post a Comment