Ionic-framework: Focus input on popup

Created on 18 Mar 2014  ·  7Comments  ·  Source: ionic-team/ionic-framework

Some popups should focus their inputs first. Should test this to make sure it works well on iOS though.

Most helpful comment

I had to add this template string to my prompt in order to have autofocus

template: '<input ng-model="data.response" type="text" placeholder="{{ placeHolder }}" autofocus>'

All 7 comments

Popups already focus their inputs first. However, there is a bug with this. The popup always focuses the LAST input element. It should really focus the first.

Forum : http://forum.ionicframework.com/t/popup-with-multiple-text-input-fields-always-focuses-on-2nd-input/4956/2
Sample : http://codepen.io/calendee/pen/duvsl?editors=101

PR coming in a few minutes.

I find that this works great on web, but not on iOS... the code runs, but the input doesn't focus nor does the keyboard open up.

@michaelnatkin : In your config.xml, make sure you have this setting:

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

iOS will not allow a field to get focus and keyboard open unless this is set to false.

@calendee OMG thank you!! Problem solved. Ionic team it would be nice to add that note to the ionicPopup doc.

@calendee It work on iOS but this doesn't work on Android devices. Or there's something that I forgot?

@felquis, I had the same problem. After looking at this issue and #1176, I eventually found https://github.com/driftyco/ionic/commit/49a295638d6c60b7e17936cfb345665f6b1954d1, and I was able to fix my application by using a template with an autofocused input:

diff --git a/www/js/app.js b/www/js/app.js
index 8e7afcd..1131dfb 100644
--- a/www/js/app.js
+++ b/www/js/app.js
@@ -57,6 +57,7 @@ angular.module('todo', ['ionic'])
   $scope.newProject = function() {
     $ionicPopup.prompt({
       title: 'Project name',
+      template: '<input autofocus>'
     })
     .then(createProject)
   };

I had to add this template string to my prompt in order to have autofocus

template: '<input ng-model="data.response" type="text" placeholder="{{ placeHolder }}" autofocus>'

Was this page helpful?
0 / 5 - 0 ratings