2016-05-12 15 views
8

Ho una semplice <select></select> all'interno di un <div> con un attributo ng-show, qualcosa di simile:angolare selezionare lampeggiante

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

Ora, per qualche motivo, quando clicco sul select per aprirla, sarà lampeggiante come se la selezione si stava aprendo/chiudendo molto velocemente. A volte lampeggia due volte, a volte di più. Ho usato scatole select con angolare prima e mai avuto questo.

Ho scoperto che cosa stava causando. La forma completa dove capita assomiglia:

<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> 

Quando viene visualizzato il form, il primo <input> (il pulsante di scelta selezionato) è a fuoco, e quando clicco sul <select> per aprirlo, si verificherà un $apply (questo è il comportamento di base di Angular, niente di personalizzato) causando la ricompilazione di ? Se faccio clic ovunque, il <select> non lampeggia, oppure lo sfocatura manualmente come $(':focus').blur(); quindi non lampeggia neanche.

Nota: la forma è in una finestra di dialogo (ngDialog), non so se questo fa la differenza

+1

Qualcosa di insolito. Demo per favore o è difficile da indovinare. – dfsq

+0

@dfsq yeah so che è anche per questo che è difficile creare un plunkr o qualcosa ... Spero che qualcuno abbia lo stesso problema ^^, e lavorerò per provare a riprodurre – Guillaume

+0

@dfsq Ho aggiornato la descrizione con una più completa esempio e le mie scoperte finora. Ho provato a metterlo in un plunker ma senza risultato, il bug non appare né – Guillaume

risposta

3

Sembra essere questo bug:

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

Come suggerito nei commenti, l'impostazione la transizione a nessuno sul select ha lavorato intorno al problema, nel mio caso (con bootstrap) utilizzando la seguente:

select.form-control { transition: none; } 

Per uso senza bootstrap, o dove non si utilizza la classe .Form-controllo, è sufficiente rilasciare il selettore .Form controllo e assicurarsi che nient'altro è prevalente la proprietà di transizione su alcuni elementi:

select { transition: none; } 
+0

Bella cattura, ho dovuto settarlo usando 'transition: none! Important;' ma risolve il problema! – Guillaume

0

Questo sembra essere risolto con la versione di Chrome di 51.0.2704.63

Problemi correlati