I’m looking for a way to keep the keyboard open when the user presses the button “send”.
Searching on the forum, the solution is to reset the focus on the input field.
But I have a really strange behavior … when I set the variable “IsFocused” to false is always called the blur event!
I started from the repo ionic-chat and I included this directive:
.directive('isFocused', function($timeout) {
return {
scope : {trigger : '@isFocused'},
link : function(scope, element) {
console.log('start directive');
scope.$watch('trigger', function(value) {
console.log('TRIGGER');
console.log(value);
if(value === "true") {
console.log("TRUE");
$timeout(function() {
console.log("FOCUS");
element[0].focus();
element.on('blur', function() {
console.log("BLUR");
if(value === "true") {
console.log("BLUR TRUE");
element[0].focus();
}
});
});
}
});
}
};
})
the controller is:
.controller('Messages', function($scope, $timeout, $ionicScrollDelegate, $window) {
var alternate;
$scope.isFocused = "false";
$scope.noFocus = function() {
console.log("NO FOCUS");
$scope.isFocused = "false";
};
$scope.onFocus = function() {
console.log('ON FOCUS');
$scope.isFocused = "true";
};
$window.addEventListener('native.keyboardshow', function (event) {
console.log('native.keyboardshow');
});
$scope.sendMessage = function() {
alternate = !alternate;
$scope.messages.push({
userId : alternate ? '12345' : '54321',
text : $scope.data.message
});
delete $scope.data.message;
$ionicScrollDelegate.scrollBottom(true);
}
$scope.data = {};
$scope.myId = '12345';
$scope.messages = [];
});
the template:
<ion-content class="content-stable" ng-style="{ bottom: data.keyboardHeight + 'px' }" ng-click="noFocus()">
<div ng-repeat="message in messages" ng-class="{ other: message.userId != myId }" class="message">
<div class="photo icon ion-person"></div>
<div class="message"><span>{{ message.text }}</span>
</div>
</div>
</ion-content>
<ion-footer-bar keyboard-attach class="bar-stable item-input-inset">
<label class="item-input-wrapper">
<input type="text" placeholder="Type your message" ng-model="data.message" is-focused="{{ isFocused }}" ng-click="onFocus()" />
</label>
<button class="button button-clear" ng-click="sendMessage()">
Send
</button>
</ion-footer-bar>
when I hit the send button everything is ok, when in fact I press anywhere in the ion-content variable is set to false but the keyboard is open!
Here the logs when I open the keyboard the first time:
2014-11-01 12:40:48.964 HelloCordova[1110:309898] ON FOCUS
2014-11-01 12:40:48.965 HelloCordova[1110:309898] TRIGGER
2014-11-01 12:40:48.965 HelloCordova[1110:309898] true
2014-11-01 12:40:48.965 HelloCordova[1110:309898] TRUE
2014-11-01 12:40:48.965 HelloCordova[1110:309898] native.keyboardshow
2014-11-01 12:40:49.212 HelloCordova[1110:309898] FOCUS
here the log when I press the button “send”:
2014-11-01 12:41:29.418 HelloCordova[1110:309898] BLUR
2014-11-01 12:41:29.419 HelloCordova[1110:309898] BLUR TRUE
2014-11-01 12:41:29.422 HelloCordova[1110:309898] native.keyboardshow
here the log when I press anywhere in the ion-content:
2014-11-01 12:42:13.518 HelloCordova[1110:309898] NO FOCUS
2014-11-01 12:42:13.519 HelloCordova[1110:309898] TRIGGER
2014-11-01 12:42:13.519 HelloCordova[1110:309898] false
2014-11-01 12:42:13.520 HelloCordova[1110:309898] BLUR
2014-11-01 12:42:13.521 HelloCordova[1110:309898] BLUR TRUE
2014-11-01 12:42:13.530 HelloCordova[1110:309898] native.keyboardshow
How can I fix this?
Thanks to all
EDIT: I’m trying to ios directly on the device