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

[thebuilder]

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>

[thebuilder]

In the above HTML it can be replicated by first clicking "Your name" and then "From". You will first select "From", and then end up in "To"

[thebuilder]

Seems to be caused by "tapPolyfill" in "poly.js.
Removing ionic.on("tap", tapPolyfill, document); will correctly select the item after half a second, but of course you would prefer to not have that delay.

[adamdbradley]

What version were you using when this happened? Reason I ask is because we just released v0.9.24 and it has many click issue fixes in it.

[thebuilder]

HI Adam, it should be the latest version, including the latest update to poly.js: "fix(click): Clicks firing twice, closes #573"

[adamdbradley]

Ok, in all my tests on Android 4 and iOS7, this commit fixed this issue:
https://github.com/driftyco/ionic/commit/fc8ab4b8ea9b89bd3446b835476950bb70bba879#diff-fc2330e9d704db3cddd3d3d538612023L49

Would you be able to double check it's fixed, along with some random other tap/click testing to make sure it works for you? Thanks.

[adamdbradley]

Sorry, I also should have mentioned you can get the nightly build with these changes here:
http://code.ionicframework.com/#nightly

Also, I noticed in your example you have the stopEvent directive, which oddly enough I just added to Ionic:
https://github.com/driftyco/ionic/blob/master/js/ext/angular/src/directive/ionicTouch.js#L50

How's the stop-event directive working for you? Any issues I should be aware of?

[thebuilder]

I'll try it out!
The stopEvent is working nicely. I'm using it in a modal with a card, so clicks on the modal closes it, but clicks inside the card are stopped. Like:

<div class="modal center-content" ng-click="closeDetails()">
    <div class="card" stop-event="click">
        ...
    </div>
</div>

My implementation looks like this. I remove the event on scope.destroy, but maybe that isn't needed?

.directive('stopEvent', function () {
        return {
            restrict: 'A',
            scope: false,
            link: function ($scope, $element, $attr) {
                $element.bind($attr.stopEvent, function (e) {
                    e.stopPropagation();
                });
                $scope.$on('$destroy', function() {
                    $element.unbind($attr.stopEvent);
                });
            }
        };
    })

[thebuilder]

The good news is that it seems to have fixed the issue with input fields activating other input field! But, it has reintroduced "ghost clicks" to a degree.

I have observed in these cases so far:

• If i click the first "side menu" item and the page has a "search" field in the subheader, i end up setting focus to the search field.
• When i close a modal by clicking a close button above an input field, the input field gets focus. Only an issue if the item below is an input field, so it doesn't activate other items etc.
  I have tested this on iPad w. iOS7 and the iOS simulator.

[thebuilder]

Also, if an input field has focus, it does not loose focus when clicking a button/list item/anchor tag. So if i'm searching, and clicking a list item to open a modal the keyboard will still be up, and the input cursor can be seen.

[thebuilder]

I've been debugging this a bit myself, and have implemented fixes.
Issue with the keyboard not blurring, was fixed by adding the blur code inside tapElement. Previously. Because of the return call in tapPolyFill the method function that blurred the active element was never executed if clicking a button.
https://github.com/thebuilder/ionic/commit/b7df9acaf085b3600ed5005a41fc00d337e59d05

[thebuilder]

The issue with input below modal getting selected seems to be fixed by this:
https://github.com/thebuilder/ionic/commit/95d2189a8dd70a7f98c91bd1c0f16e5b39590288

[adamdbradley]

Awesome, thanks for the help on this. The big change I did was stopPropegation and preventDefault on the second click or recent tap, per your idea.
https://github.com/driftyco/ionic/commit/91fbcdc1305f7bb7fd00de0a684d3a90f7b8d6ee#diff-fc2330e9d704db3cddd3d3d538612023L75 (I also created a small stopEvent() method to tidy up the code a bit)

Would you be able to test it out again?

[thebuilder]

Hi Adam, this seems to have fixed the issue with input fields getting focus when closing a modal.
However, it is still an issue the other way around. If an input field has focus (And keyboard is open), clicking a button will not blur the keyboard.
I solved it in this commit:
https://github.com/thebuilder/ionic/commit/b7df9acaf085b3600ed5005a41fc00d337e59d05
Currently you are blurring the element that recieves focus, instead of the previous element.

[adamdbradley]

Ok, I added that into this commit: https://github.com/driftyco/ionic/commit/f736ae510e8542e0078e3c1dd7b85291f0ec126d

On top of that, I noticed some pretty weird scrolling happened if the keyboard was up, and it immediately blurred the input, so I blur it with a timeout and seemed to help. Please test it out and let me know what you think, thanks.

http://code.ionicframework.com/#nightly

[adamdbradley]

@thebuilder I had to make changes to this original fix, and in my tests this issue did not resurface, but would be able to test the latest nightly build and verify it's still working as expected? Thanks

https://github.com/driftyco/ionic/issues/1068
https://github.com/driftyco/ionic/commit/a977332f2b847262a406cf1fbedb2c3bb6b560eb

[ajoslin]

@adamdbradley is this still valid?

[anandanaphade]

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

[Wgil]

This issue is still happening to me.
@anandanaphade thank you, I added it to the div that wraps the input and label and it works.

[sahossai]

ios cursor is not coming when scrolling ionic scroll in the "version": "1.0.0-beta.14" but the keyboard is up and ghost click happening, is there any solution without updating the ionic version?
is there any directive or any other solution?

[ionitron-bot[bot]]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.