ionic-framework: Prevent ghost click causes click after keyboard opens

If you click a label with an input element on iOS the keyboard to opens. But after half a second a second click is dispatched on the current input that has moved below the click point. This causes the wrong input field to be selected. If you hold the finger for more than half a second, the extra click is not dispatched

The HTML for the form is pretty basic:

<view title="'Absence'" left-buttons="leftButtons" hide-back-button="false">
    <content has-header="true" padding="true" overflow-scroll="false">
        <div class="list">
            <label class="item item-input">
                <span class="input-label" ng-required>Your Name</span>
                <input type="text" ng-model="form.name">
            </label>
            <a class="item item-checkbox no-arrow" ng-click="options.rememberMe = !options.rememberMe">
                <span class="input-label">Remember me</span>
                <label class="checkbox">
                    <input type="checkbox" ng-model="options.rememberMe" stop-event="click">
                </label>
            </a>
        </div>

        <label class="item item-input">
            <span class="input-label">From</span>
            <input type="time" class="text-right" ng-model="form.fromTime" ng-required>
        </label>

        <label class="item item-input">
            <span class="input-label">To</span>
            <input type="time" class="text-right" ng-model="form.toTime" ng-required>
        </label>

        <label class="item item-input  item-stacked-label">
            <span class="input-label">Comment</span>
            <textarea ng-model="form.comment"></textarea>
        </label>

        <button class="button button-block button-energized" ng-click="submit()">
            Inform Reception
        </button>
    </content>
</view>

About this issue

  • Original URL
  • State: closed
  • Created 10 years ago
  • Comments: 20 (7 by maintainers)

Most upvoted comments

use of data-tap-disabled=“true” solved my problem http://ionicframework.com/docs/api/page/tap/