Input field automatically blurs after 1 second on Android 4.4.2

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'
        };
    });

Just to add on, just now in chrome inspector, I saw that when I tap on the second input, there is a new input field being inserted in between my two inputs. It has a class called “cloned-text-input”. Thus, my original input field is not focused. Any idea why this is happening?

The highlighted input tag is inserted automatically after I tap on my message input field.

Do you have the ionic keyboard plugin installed?

Yes that seems to have solved the problem. Thanks for the help!

Out of curiosity, what solved the issue? I’m having a similar problem. Did you install or uninstall the keyboard plugin?