Guillaume Guillaume - 6 months ago 32
AngularJS Question

Angular select blinking

I have a simple

<select></select>
inside a
<div>
with a
ng-show
attribute, something like:

<div ng-show="edit">
<select ng-options="key as value in VALUES"></select>
</div>


Now for some reason, when I click on the
select
to open it, it will be blinking like if the select was opening/closing really quickly. Sometimes it blinks twice, sometimes more. I have used
select
boxes with angular before and never had this.

I found out what was causing it. The complete form where it happens looks like:

<form class="mb-lg" name="formValidate" ng-init="addCreate = '.action_add'" novalidate="" role="form">
<label class="radio-inline c-radio">
<input id="action_add" name="add_create" ng-model="addCreate" required="required" type="radio" value=".action_add">
<span class="fa fa-circle"></span>
Add to existing
</label>
<div class="form-group has-feedback">
<select class="form-control" name="selected" ng-disabled="addCreate != '.action_add'" ng-model="selected" ng-options="p as p.name for p in portfolios | filter : {'update?': true}" ng-required="addCreate == '.action_add'" required="required"></select>
</div>
<label class="radio-inline c-radio ng-binding">
<input id="action_create" name="add_create" ng-model="addCreate" required="required" type="radio" value=".action_create">
<span class="fa fa-circle"></span>
Or Create new one
</label>
<div class="form-group has-feedback">
<input class="form-control" name="name" ng-disabled="addCreate != '.action_create'" ng-model="new" ng-required="addCreate == '.action_create'" disabled="disabled">
</div>
</form>


When the form is displayed, the first
<input>
(the selected radio button) is focused, and when I click on the
<select>
to open it, an
$apply
will occur (this is the basic behavior of Angular, nothing custom) causing the
<select>
to recompile? If I click anywhere, then the
<select>
will not blink, or it I blur it manually like
$(':focus').blur();
then it does not blink either.

Note: the form is in a dialog (
ngDialog
), not sure if that makes a difference

Answer

It appears to be this bug:

https://bugs.chromium.org/p/chromium/issues/detail?id=613885

As suggested in the comments, setting transition to none on the select has worked around the problem, in my case (with bootstrap) using the following:

select.form-control { transition: none; }

For use without bootstrap, or where not using the .form-control class, simply drop the .form-control selector and make sure nothing else is overriding the transition property on select elements:

select { transition: none; }
Comments