Reputation: 1772
My app has ui-bootstrap modal with a few inputs and button. It works perfectly on desktop, but on narrower screen the modal is losing focus (cursor disappears from input box) after releasing mouse button, so it's quite difficult to enter anything there.
TIP: It works when I have mouse button pressed. I'm able to enter test:).
modal code:
<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">×</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>
UPDATE 1: I added ngTouch to application modules, but still the same problem:
var app = angular.module('XXXX', [
'ngRoute', 'ui.bootstrap', 'LocalStorageModule', 'duScroll', 'ngTouch'
]).
UPDATE 2: after implementing UPDATE1 it works a bit better:It works stable in FF &IE11, but sometimes it fails in Chrome.
Upvotes: 1
Views: 120