Bootstrap UI with Angular JS issues on compiled JS file

Question

I'm working with rails app and running bootstrap ui library. The application's working well on all browsers except <=IE8 ....

After a little time of investigations I found the part of code that was generating an error :

compiled application.js :

 u.bind("keydown",function(t){0!==k.matches.length&&-1!==a.indexOf(t.which)&&(t.preventDefault(),40===t.which?(k.activeIdx=(k.activeIdx+1)%k.matches.length,k.$digest()):38===t.which?(k.activeIdx=(k.activeIdx?k.activeIdx:k.matches.length)-1,k.$digest()):13===t.which||9===t.which?k.$apply(function(){k.select(k.activeIdx)

and UI Bootstrap template uncompiled :

 element.bind('keydown', function (evt) {

    //typeahead is open and an "interesting" key was pressed
    if (scope.matches.length === 0 || HOT_KEYS.indexOf(evt.which) === -1) {
      return;
    }

    evt.preventDefault();

    if (evt.which === 40) {
      scope.activeIdx = (scope.activeIdx + 1) % scope.matches.length;
      scope.$digest();

    } else if (evt.which === 38) {
      scope.activeIdx = (scope.activeIdx ? scope.activeIdx : scope.matches.length) - 1;
      scope.$digest();

    } else if (evt.which === 13 || evt.which === 9) {
      scope.$apply(function () {
        scope.select(scope.activeIdx);
      });

    } else if (evt.which === 27) {
      evt.stopPropagation();

      resetMatches();
      scope.$digest();
    }
  });

Does anyone know how I can – AT LEAST – fix this bug on IE8 ?

Thanks :)

score 1 · Answer 1 · answered Sep 20 '13 at 15:55

There may be more behind the scenes but this is what I believe.

evt.which is the standard watch for keypress in most browsers except IE's older versions. Their's is window.event.keyCode. It looks like the error could be because IE8 does not handle event.which so it is a null value. This may be patched for you in either modernizr or the html5 shim (some call it shiv but a shiv is a weapon and a shim is an item used to fill small gaps so a shim is more succinct).

Double check to see if evt before it is passed to the function has logic to either be bound to window.event if exists, else event. If not you can try hacking it similar to what I have below.

var evt = evt || window.event;

Again there may be more behind the scenes but if I had to bet money, this would be the issue.

Thanks for your advice. I'm trying to find a way through window.event. Btw, I added a comment to UI Bootstrap github code. I'll give some news about it :) — user1713964, Sep 23 '13 at 15:42

score 1 · Accepted Answer · edited May 23 '17 at 11:58

1

Thanks to @dasper, I found a way to work around this UI Bootstrap file with this help :

How to fix Array indexOf() in JavaScript for Internet Explorer browsers

This looks like this now :

 var keyCode = (window.event) ? evt.keyCode : evt.which;
    var a = jQuery.inArray(keyCode,HOT_KEYS);

    if (scope.matches.length === 0 || a === -1) {
      return;
    }
    .....

and replaced all evt.which with keyCode var.

Working as a charm on IE8 and other browsers :)

edited May 23 '17 at 11:58

Community

1
1

answered Sep 23 '13 at 17:24

user1713964

1,209
2
14
26

1

Happy to be of service and to be able to give back to the community that has helped me out on numerous occasions. Good Luck! – dasper Sep 24 '13 at 17:11

Bootstrap UI with Angular JS issues on compiled JS file

2 Answers2