I have this very strange problem that occurs in a Ripple emulator where the text field does not focus ... or at least it seems that it does not focus (the cursor does not blink in it when I click on it). However, if I start typing, then click from the text box, the contents of the text box will suddenly refresh to reflect what I typed.
This seems to be due to css, AngularJS and Ionic Framework combined.
I have below HTML (this does not play in plunkr)
<ion-view> <ion-nav-buttons side="left"> <button menu-toggle="left" class="button button-icon icon ion-navicon"></button> </ion-nav-buttons> <ion-content class="has-header"> <div style="margin-top: 20px;"> <label class="item item-input"> <span class="input-label">Date</span> <input type="date" ng-change="search()" ng-model="filter.date"> </label> <label class="item item-input"> <span class="input-label">Only Unscheduled</span> <ion-checkbox ng-change="search()" style="border: none" ng-model="filter.onlyUnscheduled"></ion-checkbox> </label> <label class="item item-input"> <button class="button button-positive" ng-click="clearMatches()">Clear Matches</button> </label> <label class="item item-input"> <button class="button button-positive" ng-click="makeTestUsersPlay()">Make Test Users Play</button> </label> <label class="item item-input"> <button class="button button-positive" ng-click="makeTestDate()">Make Test Date</button> </label> </div> <ion-list> <ion-item ng-repeat="item in dates track by $index" style="padding: 0; padding-top: 10px;"> <form novalidate="novalidate" on-valid-submit="save(item)"> <div> <div class="item item-divider" style="text-align: center; margin-bottom: 20px"> {{item.description}}{{item.isCancelled ? ' (Cancelled)' : ''}} </div> <label class="item item-input"> <span class="input-label">Location</span> <input type="text" ng-model="item.location" name="location"> </label> <label class="item item-input"> <span class="input-label">Time</span> <input type="time" ng-model="item.time" name="time"> </label> <div class="padding"> <button type="submit" class="button button-energized"> Save </button> <div style="width: 75px; padding: 0" ng-click="charge(item, item.userId1)" ng-disabled="item.user1ChargeId" class="button button-energized"> Charge 1 </div> <a style="width: 75px; padding: 0" ng-click="charge(item, item.userId2)" ng-disabled="item.user2ChargeId" class="button button-energized"> Charge 2 </a> </div> </div> </form> </ion-item> </ion-list> </ion-content> </ion-view>
If I remove buttons and button-positive classes from all buttons, it unexpectedly works as expected.
UPDATE:
Here is the source of ionic.css where you can find all the styles
http://code.ionicframework.com/nightly/css/ionic.css
If I changed the button class to:
.button{ min-height: inherit; min-width: inherit; padding: inherit; line-height: inherit; }
The problem disappears. This suggests that the browser error associated with the button trying to go beyond or something like that.
source share