IE input element focus not working with angular directive

Question

I have a div populated dynamically with input elements and setting the focus on the first input field. The focus works on Chrome but not on IE. Here is the plnkr http://plnkr.co/edit/b6urKKilDVRwuqVQfbWt

The focus is in fact done inside a timeout function but still the focus does not seem to do anything on the input field. I am using an angular directive to create my form elements.

directive('ngppParameters', ["$compile","$timeout",function($compile,$timeout) {
  return {
        restrict: 'E',       
        link:function($scope,$element,$attrs)
        {
            $scope.$watch("tree.length", function (value) {       

                if(value.length===0)
                    return;                

                $timeout(function() {
                    var fields = $("ngpp-parameters input").filter(":visible:first");
                    console.log("Setting the focus");
                    if(fields.length>0)
                    {
                       console.log("Setting focus");
                       fields[0].focus();                   

                    }
                },10);              
            });
        }        
    };

Update:

This is the directive.

score 2 · Accepted Answer · answered Apr 07 '15 at 20:21

2

Finally found the issue, IE is treating the disabled parent and not letting the focus to be set on the children.

I have removed the disabled="disabled" attr from the directive pp-field and it works as expected. All other browsers except IE are not considering the parents disabled state.

answered Apr 07 '15 at 20:21

Kathir

6,136
8
36
67

I am also facing same problem can you help.. http://stackoverflow.com/questions/35054171/input-box-is-not-working-with-angular-in-ie?noredirect=1#comment57832336_35054171 – Javascript Coder Jan 28 '16 at 08:57

score 2 · Answer 2 · answered May 11 '15 at 07:04

2

Make sure you use ng-disabled="" instead of disabled attribute to make browsers to ignore it and behave as expected.

answered May 11 '15 at 07:04

Rvach.Flyver

184
1
7

score 0 · Answer 3 · answered Apr 07 '15 at 18:29

0

fields[0] isn't what you think it is (i've been caught by this same mistake before).

You want fields.eq(0)

https://api.jquery.com/eq/

You might also be able to just called fields.focus(). If there's only one in there that should work.

answered Apr 07 '15 at 18:29

HankScorpio

3,612
15
27

I just tried using fields.eq(0).focus() and that didnt make any difference. The focus is still not on the input field in IE. Thanks. – Kathir Apr 07 '15 at 19:56

IE input element focus not working with angular directive

3 Answers3