CODEWITHSUNDEEP
angularjsinternet-explorerhtml-input
Kathir
Kathir

Reputation: 6196

IE input element focus not working with angular directive

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.

Upvotes: 0

Views: 2947

Answers (3)

Rvach.Flyver
Rvach.Flyver

Reputation: 304

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

Upvotes: 2

Kathir
Kathir

Reputation: 6196

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.

Upvotes: 2

HankScorpio
HankScorpio

Reputation: 3651

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.

Upvotes: 0

Related Questions