I’m making a simple todo app to learn Ionic but I’ve run into a problem I cannot solve after several days of frustration. I use a modal to display a single text input and a single button. I would like to have the text input in focus and the ios keyboard pop up when the modal is displayed. After trying all the possible solutions, nothing works. I have the cordova keyboard plugin, I’ve tried autofocus, focusFirstInput, directives that focus, and direct dom manipulation to set focus. Nothing works. Is it supposed to work or is this a current Ionic/Angular issue?
You will need to write a directive to do that, something like:
.directive('autoFocus', ['$timeout', function($timeout) {
return {
scope: {
modal: "@"
},
restrict: 'AC',
link: function(_scope, _element) {
if (_scope.modal) {
_scope.$on('modal.shown', function() {
$timeout(function() {
_element[0].focus();
});
});
} else {
$timeout(function() {
_element[0].focus();
});
}
}
};
}])
I’m sorry but this does not work either, like the the other directives I’ve tried. What is weird is that the directive is firing when the parent screen is displayed, not when the modal is displayed. The modal is being defined in my controller:
$ionicModal.fromTemplateUrl(‘pages/dates/addDate.html’, {
scope: $scope
}).then(function(addModal) {
$scope.addModal = addModal;
});
Might be timing issue (at least that’s what we found).