Guillaume Guillaume - 1 year ago 197
AngularJS Question

Angular select blinking

I have a simple

inside a
with a
attribute, something like:

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

Now for some reason, when I click on the
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
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
<div class="form-group has-feedback">
<select class="form-control" name="selected" ng-disabled="addCreate != '.action_add'" ng-model="selected" ng-options="p as for p in portfolios | filter : {'update?': true}" ng-required="addCreate == '.action_add'" required="required"></select>
<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
<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">

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

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

Answer Source

It appears to be this bug:

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; }
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download