Can't focus input in AngularJS

Question

I'm trying to focus an input box with AngularJS. To achieve that I created a custom directive, but for some reasons it doesn't work on a particular input box.

This is my 'focus' directive:

angular.module('app.ui.input').directive('ooFocus', function()
{
    return {
        scope : {
            trigger : '=ooFocus'
        },
        restrict : 'A',
        link : function(scope, element, attrs)
        {
            scope.$watch('trigger', function(value)
            {
                if(value)
                {
                    console.log('this will be printed');
                    element[0].focus();
                    element[0].select();
                }
            });
        }
    }
});

And this is how it looks like when it's being applied to the input box:

<input placeholder="Company name" type="text" ng-model="company.name" ng-blur="hide()" oo-focus="show" required>

The form containing the input box is hidden and it's displayed when show is set to true. show is passed to the oo-focus directive and I can see that the directive is printing this will be printed in the console whenever show is set to true, but for some reasons the input is not focused.

Sulthan · Accepted Answer · 2015-05-25 17:05:50Z

3

You can't focus what's hidden, it's as simple as that. So you have to be sure that your input is displayed before trying to focus it.

The problem is that usually you are not working with css directly, which would show the element immediately. Usually you are using a directive like ng-show or ng-if and you can't even be sure if they are evaluated before ooFocus.

Using $timeout to delay the focus is a good solution for such a situation.

answered May 25, 2015 at 17:05

Sulthan

130k23 gold badges223 silver badges277 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

siannone Over a year ago

This is a really good explanation, thank you :) Could it be that if I have a slow computer I need to set a longer timeout?

Sulthan Over a year ago

@siannone That shouldn't matter, usually you are using zero timeout which only means "handle this when everything else has been handled". Then you can be sure that the element has been displayed and you can focus it.

svassr Over a year ago

I have the same issue except I'm not in $watch use case. Using $timeout ,no matter how long it is, doesn't help. Odd thing though: it works perfectly when I add a breakpoint through sources devtool.

Alhuck · Accepted Answer · 2015-05-25 16:18:41Z

1

I have one work around for this. Try using $timeout inside directive like this,

.directive('ooFocus',function($timeout) {
return {
    scope : {
        trigger : '=ooFocus'
    },
    restrict : 'A',
    link : function(scope, element) {

        scope.$watch('trigger', function(value) {
          if (value) {
            $timeout(function() {
                element[0].focus();
            });
          }
        });
    }
};

});

edited May 25, 2015 at 16:18

answered May 25, 2015 at 14:46

Alhuck

1,0298 silver badges11 bronze badges

2 Comments

siannone Over a year ago

I did that exactly 30 seconds before reading your answer and this works. The question is: Why? P.S. value === "true" should be fixed in your answer because i'm comparing value with the boolean value true not with the string "true".

Alhuck Over a year ago

I told you it as a work around but $timeout gives some time for the element to render before trying to focus it !!!

Collectives™ on Stack Overflow

Can't focus input in AngularJS

2 Answers 2

3 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related