TextBoxes won't take focus

Question

I have this very strange problem that occurs in the Ripple Emulator where a textbox won't take focus...or at least it appears to not take focus (there is no cursor blinking in it once I click into it). However, if I start typing, then click out of the textbox, the content of the textbox suddenly updates to reflect what I've typed.

This seems to have something to do with css, AngularJS and Ionic Framework combined.

I have the below HTML (this isn't reproducible 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 the button and button-positive classes from all the buttons it suddenly works as expected.

UPDATE:

Here is the source of ionic.css where all the styles can be found

http://code.ionicframework.com/nightly/css/ionic.css

If I change the button class to:

.button{
    min-height: inherit;
    min-width: inherit;
    padding: inherit;
    line-height: inherit;
}

The problem disappears. This suggests to me a browser rendering bug having to do with the button trying to spill out of bounds or something.

Answer 1

You can use the HTML5 autofocus attribute in your html file:

First name: <input type="text" name="fname" autofocus>

Now the focus will be set on this input element after the page is loaded.

Answer 2

Old question but worth an answer. Have you checked the css color attribute. It might be set to white making it invisible.