Ionic-framework: focusFirstInput (Modal) doesn't work on Android

[zelphir]

I was able to make it working on iOS adding <preference name="KeyboardDisplayRequiresUserAction" value="false" /> in the config.xml.

I don't how to do on Android, I've tried to use this cordova plugin (https://github.com/phonostar/PhoneGap-SoftKeyboard.git) but it doesn't work. Suggestions?

[zelphir]

Has anyone found a solution?

[keithdmoore]

For Android devices, the first input gets focus but the keyboard doesn't display. The user has to touch the input in order to get the keyboard to display. This happens on my Nexus 7 running Android 4.4.2. It also occurs on my Samsung Galaxy Tab 3 (10 inch) running Android 4.2.2. I would be happy to test a fix for this.

[frissonlabs]

In order to get the keyboard to display on focus, you can use the following directive:

angular.module('directives')
.directive('isFocused', function($timeout) {
  return {
    scope: { trigger: '&isFocused' },
    link: function(scope, element) {
        if(scope.trigger()) {
          $timeout(function() {
            element[0].focus();
            element[0].click();
          });
        }
    }
  };
});

for example:

<textarea rows="8" ng-model="text" is-focused="true"></textarea>

I'm guessing the default implementation does not include the auto-display of the keyboard on focus for fear of hiding content unintentionally.

[Ionitron]

Greetings, @zelphir!

Due to the age of this issue, and possibility it may have already been fixed or no longer applicable, my sensors indicate that this issue should be closed.

If you are still experiencing this issue, please feel free to reopen and provide the following information so that I may assist you.

• Can you provide a detailed description of this issue?
• How would a robot go about replicating this issue?
• What platform does this happen on? (iOS, Android, all, etc.)
• What platform versions does this happen on? (Android 4.2, iOS 7, all, etc.)
• Is this an issue with the Ionic Framework, or Ionic CLI?

Additionally, providing a codepen which replicates the issue is extremely helpful.

If you wish to get help using the framework itself, the recommended place is the forum.

Thank you for allowing me to assist you.

[willadamskeane]

I'm still having this problem.

[chrismoutray]

This issue has been closed but I'm still seeing the issue - is there a fix for this or has Ionitron closed - due to lack of interest?

[grecor]

I'm seeing the same problem on ios7. Can this issue be re-opened?

[grecor]

Some more details. I'm using Ionic v1.0.0-beta.12 on ios 7.
I've done the following:

• focusFirstInput: true
• config.xml with KeyboardDisplayRequiresUserAction set to false and IonicKeyboard set to true

When the modal comes up, the focus is on the first input and the keyboard displays. A half second later, both the input loses focus and the keyboard dissapear. What's even more strange is that focus seems to be on a non-existent input below the first input. The web version of the code works without any problems.

[MeghaY]

I am also seeing the same problem on ios7. I also posted this question on ionic forum but didn't really hear from them. Does anyone know the fix for this?

[grecor]

correction: i'm using Ionic Ionic v1.0.0-beta.13

[hypery2k]

together with the IonicKeyboard Plugin I found a working solution on iOS 7+ and Android 4.4+ by using a directive

/**
 * @ngdoc directive
 * @name isFocused
 * @module flynnBookScannerApp
 * @description gives focus the the element, can be used as attribute
 */
app.directive('isFocused', function($timeout) {
    return {
        scope: {
            trigger: '&isFocused'
        },
        link: function(scope, element) {
            if (scope.trigger()) {
                $timeout(function() {
                    element[0].focus();
                    element[0].click();
                    cordova.plugins.Keyboard.show();
                });
            }
        }
    };
});

in HTML

<input type="search" data-ng-model="searchQuery.fullTextSearch"  is-focused="true"
                   placeholder="Type keywords to search ...">

and this config.xml:

<?xml version='1.0' encoding='utf-8'?>
<widget xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0" 
...
    <preference name="fullscreen" value="false" />
    <preference name="webviewbounce" value="false" />
    <preference name="UIWebViewBounce" value="false" />
    <preference name="DisallowOverscroll" value="true" />
    <preference name="KeyboardDisplayRequiresUserAction" value="false" />
</widget>

See the full example here:

We're using beta4 in the app

[itree]

Hey guys,

I have followed hypery2k's instruction. But it is still not working in iOS7. I am using
ionic --version
1.3.22

[itree]

where am I suppose to put the
app.directive

in app.js? Such as?

angular.module('starter', ['ionic', 'starter.controllers'])

.directive('isFocused', function($timeout) {
return {
scope: {
trigger: '&isFocused'
},
link: function(scope, element) {
if (scope.trigger()) {
$timeout(function() {
element[0].focus();
element[0].click();
cordova.plugins.Keyboard.show();
});
}
}
};
})

[itree]

Hey guys, I figure it out. It is working, but it doesn't work in the PhoneGap Developers App. Just a FYI