Focus() method doesn't work on input / textarea / etc

I have a problem the focus method used in my custom directive.

I’m making a chat application and I want to focus my textarea when a message is sended.

I try the method focus() but nothing happen …

Someone already had this problem ?

I used this example : http://plnkr.co/edit/gmaQCl?p=preview

My code :

app.directive('focusMe', function($timeout) {
  return {
    scope: { trigger: '=focusMe' },
    link: function(scope, element) {
      scope.$watch('trigger', function(value) {
//          console.log(element[0]);
        if(value === true) { 
          //console.log('trigger',value);
          //$timeout(function() {
//            element[0].value='';
            element[0].focus();
            scope.trigger = false;
          //});
        }
      });
    }
  };
}); 

Thank you

PS : sorry for english, it’s not my native langage :wink:

Hm, I’ve gotten focus() to work fine on iOS and android no problem.

I used this directive, which you can modify to get working.

.directive('focusMe', function($timeout) {
  return {
    link: function(scope, element, attrs) {

      $timeout(function() {
        element[0].focus(); 
      },750);
    }
  };
});
1 Like

Your solution not worked for me :frowning:

I think the problem is linked with ionic or other because even if I try in the chrome console, that doesn’t work…

I going to investigate for a solution and post it here !

Thanks

OMG !!! I had a class=“animate” on my textarea and I don’t understand why but that was this class which cause my issue !

Problem solved :slight_smile:

1 Like

Hi,

I am also facing the same problem. My input field is in a $ionicModal and i couldnt set auto focus when modal opens.

if i use something like this, in desktops it seems to work but not in android or IOS it doesn’t.

$scope.searchFieldModal.show().then(function() {
$timeout(function() {
angular.element(’.searchModalField’).trigger(‘focus’);
}, 750);
});

Any help appreciated.

Kay

You shouldn’t be do this in a controller. Any DOM manipulation should be done in a directive.

.directive('focusMe', function($timeout) {
  return {
    link: function(scope, element, attrs) {

      $timeout(function() {
        element[0].focus(); 
      },750);
    }
  };
});

I agree mhartington, We shouldn’t be doing in controller.

here is a simple plunker to show my problem.

Any help appreciated.

You could use do this.

  $ionicModal.fromTemplateUrl('modal.html', function(modal) {
    $scope.modal = modal;
  }, {
    animation: 'slide-in-up',
    focusFirstInput: true
  });

})

This focusFirstInput is built into the modal directive already and should handle your situation. Does this work for you?

1 Like

This is perfect, many thanks for your help.

1 Like

In mobile/tab it didnt work but in desktop all seemed to be okay. I tried with IOS7.1.1 and andriod 4.3 both didnt work.

The input doesn’t take focus? Or the keyboard doesn’t show?

Both, input focus isn’t there so also the keyboard isn’t shown. When I tap again in the field both happens.

Alright, let me try this out

Alright, so I added the ionic keyboard plugin and these two keys to the config.xml

<preference name="KeyboardDisplayRequiresUserAction" value="false" />

<feature name="Keyboard">
  <param name="ios-package" value="IonicKeyboard" onload="true" />
</feature>

Ran it on ios & android and all worked well.

3 Likes

That did the trick. Thanks for guiding me all the way.

Kind Regards
Kay

No problem :smile: Glad to be able to help

Hi - I’ve just run through this using Ionic, v1.0.0-beta.12 and on Android 4.1.2.

I’m using 1) focusFirstInput: true, 2) made sure keyboard plugin has been added 3) added config.xml changes…

Although the auto focus works the keyboard doesn’t popup. Any ideas?

The last comment here: https://github.com/driftyco/ionic/issues/1112 (previous to mine) suggest others are having a problem.

Hi mhartington,
I have both the settings defined in my config:
KeyboardDisplayRequiresUserAction" value=“false"
AND
ios-package” value=“IonicKeyboard” onload=“true”

Also focusFirstInput: true is present

However, when I open the modal, the focus does come to the first inout but keyboard is not opened. This is on android. (Need to check on ios). I am using ionic 1.0 rc version

The only way I got this to work was to toggle disable scroll off then on after every focus. Otherwise, focus enables iOS scrolling

.directive('focusMe', function($timeout) {
  return {
    link: function(scope, element, attrs) {

      $timeout(function() {
        element[0].focus().then(function(){
            cordova.plugins.Keyboard.disableScroll(false);
            cordova.plugins.Keyboard.disableScroll(true);
        })

      },750);
    }
  };
});

Nm, that only works half the time. Next time I do “ionic run ios” it’s broken again. UGH.