Button-small click events overlap?

Can someone take a look at this before I open an issue? I just want another set of eyes on it to make sure I’m not being an idiot.

Click the larger submit and cancel buttons. Notice how the submit & cancel counters increment properly?

Click the smaller submit buttons. Notice how the counters increment properly?

Click the smaller cancel buttons. Notice how the cancel &&&& submit counters increment?

Strange. Does anyone see something obvious that I am doing wrong?

Hey @Calendee, yeah it seems it had to do with the ng-submit on the form.

@mhartington

Thanks for taking a look at it. However, the ng-submit should not matter. Angular takes the first button type element for the form and makes that the submit button. Since the large buttons work despite the ng-submit, the small buttons should as well.

Or am I not understanding your point?

Thanks,
Justin

Further investigation…

It’s because you’re using multiple buttons.

To prevent double execution of the handler, use only one of the ngSubmit or ngClick directives. This is because of the following form submission rules in the HTML specification:

If a form has only one input field then hitting enter in this field triggers form submit (ngSubmit)
if a form has 2+ input fields and no buttons or input[type=submit] then hitting enter doesn’t trigger submit
if a form has one or more input fields and one or more buttons or input[type=submit] then hitting enter in any of the input fields will trigger the click handler on the first button or input[type=submit] (ngClick) and a submit handler on the enclosing form (ngSubmit)

So the rule of thumb seem to be use ng-click and <a></a> if there are multiple “buttons” or use one <button type="submit"></button> and ng-submit

@mhartington Thanks for sticking with me on this. I get what you’re saying about the HTML rules. However, my questions is about trying to figure out why there is a difference between regular Ionic “buttons” and Ionic buttons with the button-small class. Just applying a different class should not change the behavior of the buttons.

UPDATE : OOPS! OMG, How did I not notice this initially? I’ve spent way more time on this than a sane person would and overlooked it.

<div class="button-group">
  <p>Clicking submit or cancel only affects the clicked button.</p>
  <div class="button-bar">
    <a class="button button-balanced " ng-click="submit()">Submit : {{data.submits}}</a>
    <a class="button button-assertive" ng-click="cancel()">Cancel : {{data.cancels}}</a>
  </div>
</div>

versus

<div class="button-bar">
    <button class="button button-small button-assertive" ng-click="cancel()">
        Cancel : {{data.cancels}}
    </button>
    <button class="button button-small button-balanced" type="submit">
        Submit : {{data.submits}}
    </button>
</div>

I thought my samples were the same between the large and small. However, the difference is that with the “large” buttons, I used <a>. With the small buttons, I used <button>. Once I realized that, the problem went away.

Thanks for opening my eyes Mike.

Glad to be able to help Justin :smile:

Yeah it’s a mix of angular trying to handle thins and using html syntax with forms and <buttons>. Pretty messy stuff IMO.