Strange cursor placement in modal mode when using autofocus in Internet Explorer

Question

I had a problem with cursor placement when using autofocus in IE. The image should clearly show the problem.

Fortunately, I was able to reproduce this in plunker . I divided it into simple objects, so it should be easy enough for you to see what happens.

How to make IE behave?

AngularJS (also available in 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

Looks like I might be the "slide" that is to blame. I managed to fix this by making the modal disappear without slipping by adding "windowClass: modal fade in" as follows:

 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

Thank you for documenting this problem and diagnosing it. This was the only topic I could find about this, and this seems like a frequent problem. Isn't that a bit to destroy excess script?

css solution to the problem:

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

It kills the slide, but leaves the attenuation.

Answer 3

I used this code and solved my problem:

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