Strana collocazione del cursore in modalità modale quando si utilizza la messa a fuoco automatica in Internet Explorer

Question

Ho riscontrato un problema con il posizionamento del cursore quando si utilizza l'autofocus in IE. L'immagine dovrebbe mostrare chiaramente il problema.

Per fortuna sono stato in grado di riprodurre questo in un plunker. L'ho ridotto all'essenziale, quindi dovrebbe essere abbastanza facile vedere cosa sta succedendo.

Come faccio a comportarmi con IE?

AngularJS (anche nelle plunker)

app.directive('autofocus', [ 
    '$timeout', function($timeout) { 
     return function(scope, elem, attr) { 
      scope.$on('autofocus', function(e) { 
       $timeout(function() { 
        elem[0].focus(); 
       }); 
      }); 
     }; 
    } 
]); 

/* http://stackoverflow.com/questions/14833326/how-to-set-focus-in-angularjs */ 
app.factory('autofocus', ['$rootScope', '$timeout', function($rootScope, $timeout) { 
    return function() { 
     $timeout(function() { 
      $rootScope.$broadcast('autofocus'); 
     }); 
    }; 
}]); 

app.config(['$stateProvider', function ($stateProvider) { 
    $stateProvider.state('main', { 
     url: '/main' 
    }); 
}]); 

app.config(['$stateProvider', function ($stateProvider) { 
    $stateProvider.state('main.modal', { 
     url: '/modal', 
     onEnter: ['$state', '$stateParams', '$modal', 'autofocus', 
      function ($state, $stateParams, $modal, autofocus) { 
       var instance = $modal.open({ 
        templateUrl: 'modal.html' 
       }); 
       instance.result.then(function() { 
        // OK 
        // GOTO parent state 
        $state.go('^'); 
       }, function() { 
        // Cancel 
        // GOTO parent state 
        $state.go('^'); 
       }); 
       instance.opened.then(function() { 
        autofocus(); 
       }); 
      } 
     ] 
    }); 
}]); 

Markup

<form> 
    <div class="modal-header"> 
     <h3 class="modal-title">I'm a modal!</h3> 
    </div> 
    <div class="modal-body"> 
     <input type="text" name="foo" autofocus> 
     <br> 
     <input type="text" name="bar"> 
    </div> 
    <div class="modal-footer"> 
     <button type="submit" class="btn btn-primary">OK</button> 
     <button type="button" class="btn btn-warning" ng-click="$dismiss()">Cancel</button> 
    </div> 
</form> 

Answer 1

Mi sembra potrebbe essere il -animazione "slitta", che è la colpa. Sono riuscito a risolvere il problema forzando il modale a svanire in senza scivolare, con l'aggiunta di "windowClass: dissolvenza modale" in questo modo:

app.config(['$stateProvider', function ($stateProvider) { 
    $stateProvider.state('main.modal', { 
     url: '/modal', 
     onEnter: ['$state', '$stateParams', '$modal', 'autofocus', 
      function ($state, $stateParams, $modal, autofocus) { 
       var instance = $modal.open({ 
        templateUrl: 'modal.html', 
        windowClass: 'modal fade in' 
       }); 
       instance.result.then(function() { 
        // OK 
        // GOTO parent state 
        $state.go('^'); 
       }, function() { 
        // Cancel 
        // GOTO parent state 
        $state.go('^'); 
       }); 
       instance.opened.then(function() { 
        autofocus(); 
       }); 
      } 
     ] 
    }); 
}]); 

Answer 2

Grazie per documentare questo problema e per la diagnosi. Questo è stato l'unico argomento che ho potuto trovare su questo e sembra un problema frequente. Questo script non è un po 'eccessivo?

css sollution per il problema ::

.modal.fade { 
transition:opacity .3s linear; 
} 

Uccide la diapositiva a tutti gli effetti, ma lascia la dissolvenza in

Answer 3

Ho usato questo codice e risolvere il mio problema:.

<form> 
<div class="table-condensed"> 
    <table class="table table-condensed"> 
    .... 
    <tr> 
    <td> 
     <textarea class="form-control"></textarea> 
    </td> 
    </tr> 
    </tbody> 
</table> 
</div>