angularjs - モーダルは、ディスプレイが狭いデバイスでフォーカスを失います

Question

私のアプリには、いくつかの入力とボタンを備えた ui-bootstrap モーダルがあります。デスクトップでは完全に機能しますが、狭い画面では、マウス ボタンを放した後にモーダルがフォーカスを失う (入力ボックスからカーソルが消える) ため、そこに何かを入力するのは非常に困難です。

ヒント: マウス ボタンを押すと機能します。テストに入ることができます:)。

モーダルコード:

<div ng-controller="LoginModalCtrl as $ctrl" class="modal-login">

    <script type="text/ng-template" id="loginModalContent.html">
        <div id="ModalLog" tabindex="-1" role="dialog" aria-labelledby="Zaloguj się">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" aria-label="Close" ng-click="$ctrl.cancel();"><span aria-hidden="true">&times;</span></button>
                    <h2 class="modal-title" id="myModalLabel">Zaloguj się do accTrader.com</h2>
                </div>
                <div class="modal-body">
                    <form method="post" name="submit_reg">
                        <label for="login">Login:</label>
                        <input type="text" placeholder="login" ng-model="$ctrl.loginData.login" name="login" title="Wpisz swój login, użyj 6 do 20 znaków!" required />

                        <label for="password">Hasło:</label>
                        <input type="password" placeholder="hasło" ng-model="$ctrl.loginData.password" name="password" title="Wpisz swój login, użyj 8 do 20 znaków!" required />

                        <a href="forget.php" title="zapomniałem hasła"> Zapomniałem hasła :( </a>

                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" ng-click="$ctrl.cancel()">Zamknij</button>
                    <button type="button" class="btn btn-primary btn-md" ng-click="$ctrl.login()">Zaloguj się</button>
                </div>
            </div>
        </div>
    </script>

    <A ng-click="$ctrl.open()">Zaloguj</A>
</div>

index.html:

<!-- angular modules -->
<script src="scripts/angular/angular.min.js"></script>
<script src="scripts/angular/angular-route.min.js"></script>
<script src="scripts/angular/ui-bootstrap.min.js"></script>
<script src="scripts/angular/angular-animate.min.js"></script>
<script src="scripts/angular/angular-touch.min.js"></script>
<script src="scripts/angular/angular-local-storage.min.js"></script>

更新 1:アプリケーション モジュールに ngTouch を追加しましたが、それでも同じ問題が発生します:

var app = angular.module('XXXX', [
    'ngRoute', 'ui.bootstrap', 'LocalStorageModule', 'duScroll', 'ngTouch'
]).

更新 2: UPDATE1 を実装した後、動作が少し改善されました。FF & IE11 では安定して動作しますが、Chrome では失敗することがあります。