Strange cursor placement in modal when using autofocus in Internet Explorer

Question

I'm having an issue with the cursor placement when using autofocus in IE. The image should display the issue clearly.

fubar cursor placement

Luckily I've been able to reproduce this in a plunker. I've stripped it down to the bare essentials, so it should be easy enough to see what's going on.

How do I make IE behave?

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

ivan.abrash · Answer 1 · 2015-05-28T13:20:37.880

11

Thank you for documenting this issue and for the diagnose. This was the only topic I could find about this and it seems like a frequent problem. Isn't this script sollution bit of an overkill?

css sollution for the problem::

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

It kills the slide in effect but leaves the fade in.

edited May 28 '15 at 13:20

answered May 28 '15 at 12:56

ivan.abrash

111
1
3

1

Not sure why would someone put a -1 on this, because it actually worked for me. Actually better than providing a custom class to every modal I have to open in each controller – Aureliink Jan 03 '17 at 08:45

score 6 · Accepted Answer · answered Sep 12 '14 at 08:29

It seems like i might be the "slide"-animation which is to blame. i managed to fix this by forcing the modal to fade in without sliding, by adding "windowClass: modal fade in" like so:

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();
                });
            }
        ]
    });
}]);

score 0 · Answer 3 · answered Sep 12 '15 at 06:08

0

I used this code and resolve my problem:

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

answered Sep 12 '15 at 06:08

Lihar Taavighi

21
6

Strange cursor placement in modal when using autofocus in Internet Explorer

3 Answers3