Howto add delete icon to search input field?

6

I also experimented with similar search input and noticed there is a problem if there is a “label” tag around input.

I am using a search input in header:

see codepen: http://codepen.io/anon/pen/FhgdD

I’d like to have a cross button inside the input field to clear the
phrase, which doesn’t work using ng-model as can be seen in the codepen
example.

If I put the button outside the label tag, the clear JS function is called as expected:

<label class="item-input-wrapper">
          <i class="icon ion-ios7-search placeholder-icon"></i>
          <input type="search"                     
            placeholder="..."
            autocorrect="off"
            ng-model="phrase.txt"
          >
    </label>
    <button class="button button-icon icon ion-ios7-close-empty"
      ng-disabled="!phrase.txt.length"
      ng-click="clearSearch()"
      ></button>

Could this be a BUG?

found another post related to this problem: Cannot tap/click a clear search icon inside an input label