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

ionic-v1
#1

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:

#2

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
#3

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

#4

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
#5

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

#6

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);
    }
  };
});
#7

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

here is a simple plunker to show my problem.

Any help appreciated.

Textbox, textarea focus is not working in Ionic modal
#8

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
#9

This is perfect, many thanks for your help.

1 Like
#10

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.

#11

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

#12

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

#13

Alright, let me try this out

#14

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
#15

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

Kind Regards
Kay

#16

No problem :smile: Glad to be able to help

#17

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.

#18

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

#19

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);
    }
  };
});
#20

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