Ionic-framework: Button inside input does not trigger ng-click

[oneg1n]

I have this markup:

<div class="list">
<div class="item item-input-inset">
<label class="item-input-wrapper">
<input type="text" name="search_input" placeholder="Contact name" ng-model="searchPhrase.name">
<button class="button-clear icon ion-close-circled" ng-click="resetSearch()"></button>
</label>
</div>
</div>

The idea was to have button part of the input element, but clicking on the button does not trigger function defined in ng-click. It does work when button is defined before the input field in the markup (but then all input field has that ng-click event registered). This is however not intended. I guess it has something to do with event listener registration.

So generally - how to handle this situation? Is that a correct way how to define button inside the input field?

[drewrygh]

Another option would be to wrap the input in a form and then use ng-submit to bind to the event. Does this work for your use case?

[oneg1n]

Not really. The event on button press is sometimes not triggered at all. And strangely, clicking on the input box to start typing also triggers ng-submit defined event. Highly inconsistent.

my markup

<form name="search_form" ng-submit="resetSearch()">
  <div class="list">
     <div class="item item-input-inset">
        <label class="item-input-wrapper">
          <input type="text" name="search_input" placeholder="Contact name" ng-model="searchPhrase.name">
          <button class="button-clear icon ion-close-circled"></button>
        </label>
     </div>
  </div>
</form>

[drewrygh]

Interesting - I've tested this codepen which is working on Firefox / Chrome - Ubuntu 14.04. What browser/OS or version of iOS/Android are you using?

[oneg1n]

I have managed to run it on Chromium-dev/Mint but the input box is not 100% width. I needed to set width:100% on the form element, which is kind of weird.
Moreover - on actual android device (4.3), the button is pushed to the right from the input box and clicking on it does not reset anything.

[cdarken]

This is exactly the problem that I'm having right now. Click on ion-item works fine, but on a button inside ion-item it doesn't.

[hailor]

I have the same problem, click on button in item-input dose not trigger ng-click

    <label class="item item-input">
        <span class="input-label">Captcha</span>
        <input type="text" class="captcha" ng-model="user.captcha">  
        <img class="button button-icon button-small icon captcha" ng-click="refreshCaptcha(user.login)" ng-src="{{captchaUrl}}"/>
    </label>

[ghost]

I have the same problem but my major concern is the mobile app. I uses "on-tap" as the workaround.

[Marloto]

Same problem here, event is always triggered by input field. It doesn't matter where to add ng-click (label or input), the value of $event.target / $event.srcElement / $event.toElement is always the input field. In case of adding ng-click to the button, it is never executed.

<ion-list>
    <label class="item item-input-inset">
        <input type="text" ng-click="doSomething($event)" />
        <a class="button">ClickMe</a>
    </label>
</ion-list>

Current workaround for me, is to use the input field offsetWidth and click target, as well as adding ng-click to the input field:

$scope.doSomething = function(e) {
    if(e.target.offsetWidth > e.layerX) {
        return;
    }
    // *magic occurs*
}

Tested on mobile device (iOS) and in Chrome (Mac)

[Ionitron]

Please do not place a button inside of a label which also contains an input. http://ionicframework.com/docs/components/#item-input-inset

[calendee]

Here's some info on this problem and how to solve it:

http://forum.ionicframework.com/t/buttons-inside-form-labels/29033/3
http://play.ionic.io/app/e0996f31ffaf

[simeg]

@calendee thank you! Using a <div> to wrap the <input> and <button> works fine for me.

[calendee]

@simeg Word of caution on this. The newest release of Ionic will no longer support custom HTML for inputs. So, this workaround might not last long...

[domharrington]

Why is this an issue?

[JDonadio]

Same issue here. Try putting the button outside of (is not my case)

[dipedro]

label in Ionic is used to capture the tap and trigger focus on an input field. So, it prevents tapping anything else. by @calendee