Rating : the null value is accessible by key but not by click

[jegeay]

The zero value can be reached with the keyboard (left key) but with the mouse the minimum rate is 1.
This can lead to unexpected results in the treatment of the rates.

A solution to make this consistent can be to limit minimum rate to 1 even with the keyboard :
$scope.rate = function(value) {
if ( !$scope.readonly && value >= 1 && value <= $scope.range.length ) {
ngModelCtrl.$setViewValue(value);
ngModelCtrl.$render();
}
};
[...]
angular.module("template/rating/rating.html", []).run(["$templateCache", function($templateCache) {
$templateCache.put("template/rating/rating.html",
"<span ng-mouseleave="reset()" ng-keydown="onKeydown($event)" tabindex="0" role="slider" aria-valuemin="1" aria-valuemax="{{range.length}}" aria-valuenow="{{value}}">\n" +
" <i ng-repeat="r in range track by $index" ng-mouseenter="enter($index + 1)" ng-click="rate($index + 1)" class="glyphicon" ng-class="$index < value && (r.stateOn || 'glyphicon-star') || (r.stateOff || 'glyphicon-star-empty')">\n" +
" <span class="sr-only">({{ $index < value ? '*' : ' ' }})\n" +
" \n" +
"");
}]);

Another solution could be to be able to set rate=0 with the mouse. But I don't know how to do this....

[jegeay]

Hello karianna,
This issue is about componet Rating, not about component typeahead.

[RopoMen]

Hi @jegeay
I had this same issue and I think that it is important that user can set rating to 0 so I made this fix.
Could you check that this works as you would expect?

You can test fixed version over here https://jsfiddle.net/RopoMen/bsbmcvza/embedded/result/

[jegeay]

Hi @RopoMen

That works fine ! Thanks a lot for this great improvement 👍

The only annoying thing : it is not very intuitive to click twice to get 0.
Maybe this could be improved with the hover preview : When the selected star is hover, then show all stars empty.

[RopoMen]

But hover is not working with mobile devices.

[jegeay]

You're right...
That's not enough for mobile devices and I have no other idea for this case.

But at least, it would be better for your computers users.
And if your computers users understand and use this feature, then ...
1/ They will also use it on mobile devices
2/ Other mobile devices users will see zero-rates. Then they will look for this feature and find it (as I did on your jsfiddle).
3/ Finally, this feature will become an intuitive standard.

it become an intuitive standard on computer, then it will be a standard also on mobile devices.