Hi, I’ve got a very simple chat app using FireBase, with two input fields. One for username, the other for message. There is a strange behavior of the message input - whenever I tap on it, the bottom keyboard pops up, and then after about 1 second, the input field is blurred automatically (which means whatever I type on the keyboard is not updated in the input field). However, it doesn’t happen on the username input. When I commented the username input, the message input (the only input field) is working fine, without this issue.
I’ve been scratching my head for a while, and also updated to ionic nightly, still the problem is there. I appreciate if someone can throw light upon this.
Thanks a lot.
index.html:
<body ng-app="starter">
<ion-pane>
<ion-header-bar class="bar-stable">
<h1 class="title">Let's chat!</h1>
</ion-header-bar>
<ion-content ng-controller="ChatCtrl" padding="true">
<chat></chat>
</ion-content>
</ion-pane>
</body>
templates/chat.html (template)
<div class="list" id="chatting">
<div id="messagesDiv">
<div ng-repeat="msg in messages"><em>{{msg.from}}</em>: {{msg.body}}</div>
</div>
<div id="controls">
<input type="text" ng-model="message.name" placeholder="Name">
<input type="text" ng-model="message.body" ng-keydown="addMessage($event)"
placeholder="Message...">
<i class="icon ion-paper-airplane" ng-click="send()"></i>
</div>
</div>
controller:
angular.module('starter.controllers', ['firebase'])
.controller('ChatCtrl', function ($scope, $firebase) {
var ref = new Firebase('https://myapp.firebaseio.com/');
$scope.message = {};
$scope.messages = $firebase(ref.limit(10));
$scope.addMessage = function(e) {
if (e.keyCode !== 13) {
return;
}
$scope.send();
};
$scope.clearMessage = function () {
$scope.messages.$remove();
};
$scope.send = function () {
$scope.messages.$add({from: $scope.message.name, body: $scope.message.body});
$scope.message.body = '';
};
});
directive
angular.module('starter.directives', [])
.directive('chat', function () {
return {
restrict: 'E',
templateUrl: 'templates/chat.html'
};
});