Clicks Firing Everywhere


#1

So I was going to report a problem with Cards. Then, it all went crazy on me. Maybe this should be called “When Clicks Go Bad”.

Starting Point:

I have a “list card”. http://ionicframework.com/docs/components/#card-lists . When I click on a an item, it navigates to a different page. This has been working great in Chrome and iOS up to 0.9.20. Then, in 0.9.22 and nightlies (after 0.9.23), it still works fine in Chrome. However, on the device (not simutator), tapping a list card item would take anywhere 5 to 10 seconds to actually change the page. So, I was going to open an issue on that.

However, today, things got more strange using the nightlies. Now, I click a list card item and instantly navigate to the new page. Great. But when I click the back arrow to get back to the original list card, everything goes crazy. The app navigates back, but the menu opens instantly. I close the menu and the page instantly navigates forward to the previous page. Hitting whatever left button exists just causes back and forth action. When I somehow manage to get the app to settle down to the right page, the long delay on tapping a list card item returns.

Watch this GIF. A red flash occurs on each tap. It shows that when I click the back button, the app navigates back but opens the menu as well. I think the tap is double firing in the same spot causing 2 actions : 1) navigate back & 2) open menu.


#2

Ok, I think I found the issue. I was able to replicate and fix checkbox issue here:

On fast devices the second click after a detected tap wasn’t being disabled.

[insert sarcasm here] This tap/click stuff is fun!

The fix is in as of nightly alpha-738: http://code.ionicframework.com/#nightly


#3

@adam

You’re a miracle worker as usual. This fixed the “CheckBox Doesn’t Persist” issue and the clicks firing everywhere issue. Now my app doesn’t keep changing states between menu and the other view.

Unfortunately, the issue where it takes 5 to 10 seconds to open a list card item is back in force. I’ll put together something you can test this with.

Thanks,
Justin


#4

Yeah if I can get a look at the code I’d like to replicate the issue and figure out what’s going on.


#5

Adam,

I was able to “solve” this. I don’t understand it though. I stumbled across this yesterday when trying to test why the delay exists.

I have several list card items similar to this:

<div class="card">

	<!-- A "clickable" header that shows the user name -->
    <a id="nameCardHeader" class="item item-icon-left" ng-show="uiSections.showNameHeader" ng-click="manageUiSections('open', 'name')">
        <i class="icon ion-ios7-person"></i>
        <h2><span class="card-item-header">Name</span>{{ memberDetails.givenName }}</h2>
    </a>

	<!-- A user data entry form that displays when the header is clicked -->
    <div class="item" ng-show="uiSections.showNameForm">

        <form name="$parent.nameForm" novalidate="true" ng-submit="submitNameInfo()">

        	<p>Some form stuff goes here
        </form>

    </div>

</div>

The first item is a summary of the information in the form. The second item is a form. When the first item is clicked, the first item is no longer shown and the form card item is displayed. That’s all managed by the ng-click="manageUiSections('open', 'name')"

In my controller, I manage what card items should be displayed / open based on the status of filling out all the forms.

$scope.manageUiSections = function(event, formSection) {

    switch(event) {

        // A specific form section needs to open, all other UI sections should close
        case 'open':

            if($scope.mmc.action === 'updating' && formSection === 'name') {
                return false;
            }

            closeAllUiSections();

            switch(formSection) {

                case 'name':
                    $scope.uiSections.showNameForm = true;
                    break;

                case 'pin':
                    $scope.uiSections.showPinForm = true;
                    break;

                case 'icon':
                    $scope.uiSections.showIconForm = true;
                    break;

            }

            break;

        // A specific form section is being closed.  Determine which UI sections should open
        case 'close':

            // Close everything first.
            closeAllUiSections();

            // Name header should always be open after a first click
            $scope.uiSections.showNameHeader = true;

            if($scope.memberDetails.secretPin === ''){

                $scope.manageUiSections('open', 'pin');
                // Don't allow anything else to open right now.
                return;
            } else {
                $scope.uiSections.showPinHeader = true;
            }

            if($scope.memberDetails.selectedIcon === '') {
                $scope.manageUiSections('open', 'icon');
                // Don't allow anything else to open right now.
                return;

            }  else {
                $scope.uiSections.showIconHeader = true;
            }

            break;
    }

};

So, if I leave the code just like that, clicking on a “header” card item like in the example will cause the “nameForm” section to open. On Chrome and simulator, it happens instantaneously. On iPhone (4S iOS 6 & 5s IOS 7), it takes 5 to to seconds.

I discovered by accident that if I add ANY code before that switch statement in $scope.manageUiSections, the delay disappears. Any code will work (console.log, var a). So, now I have:

$scope.manageUiSections = function(event, formSection) {

    var a;

    switch(event) {

		...
		...
    }

};

I have no clue why this works, but it does.


#6

Holy good find batman. Very strange, I’ll starting looking into it. Thanks.


#7

@adam Thanks but I wouldn’t waste too much time on it. I’m sure it’s due to my own code rather than Ionic. I can hardly expect you to spend time tracking it down. There are more important fires out there than this.

I’m going to be rewriting that monstrous bit of code anyway.


#8

Hi!

I’m experiencing something alike during dev time with an app that I’m currently working in… I think that it has to do with the problem reported by @Calendee in this thread.

My app uses ionic-angular and every tag that I add a ng-click callback to performs the operation twice due to the tap/click simulation code at ionic.ui.touch module.

I’ve patiently debugged the code and I’ve seen that first, the tap is simulated and an artificial click event is triggered thanks to this code here. Then, the normal click event is captured and triggered too, resulting on a double call to the callback. It happens very fast (only some 3 ms away one of the other).

I suppose that this won’t happen when I run the code on a device but, as I’m developing using a browser to work faster, this could be a problem. Also, on a device this problem would be harder to detect or debug.

As you can guess, some buttons/links are use to trigger UI changes and interaction, but there are other potentially harmful actions involving ajax calls that one should have to prevent to call twice with the same information.

Is there any chance that this behavior could be conditionally deactivated on a desktop browser? Is anyone experiencing the same problem on a device?


Ng-click fires twice & ng-model is undefined
#9

Your best bet with this is to put together documentation on your exact issue and then file a bug report. I’ve changed Ionic versions a dozen times since this post and no longer have the problem.


#10

Hi, I have the same problem
I am using slide box inside tabs.
The form elements with ng-click go crazy.

I am using ionic 0.9.27, the same happened on 0.9.25

Which version were you successful with?


#11

Beta and above has this fixed. Bugs aren’t fixed on earlier versions.

Be aware that after 0.9.27 there are significant API changes. You may need to change your code quite a bit.