Cannot tap/click a clear search icon inside an input label

I’ve added a ‘clear search’ icon button to my search input, but I cannot make it respond to clicks or taps.

Here’s a screenshot of my search box:

Here’s the code for my search input row.

<div class="list list-search">
<div class="item-input-inset">
  <label class="item-input-wrapper">
    <i class="icon ion-ios7-search placeholder-icon"></i>
    <input type="text" autocorrect="off" ng-model="saleFilters.searchKeyword" placeholder="Keyword">
    <i ng-show="saleFilters.searchKeyword" ng-click="cancelKeywordSearch()" class="clear-search icon ion-ios7-close"></i>
  </label>
  <button ng-click="performKeywordSearch()" class="button button-small">
    Search
  </button>
</div>

I am using Ionic 1.0.0-beta4. I’ve tried it in Chrome 34 and in an iPhone app and on both platforms I cannot get the clear ‘search icon’ to react to clicks.

Does anyone else have the same issue? Should I be doing something differently?

Take a look at the collection repeat demo.

Notice how the input doesn’t have a label wrapped around it? Thats why your button isn’t working

1 Like

Does your ng-click events works well? If yes just remove the ng-show directive from you code and on the function cancelKeywordSearch() simply set your search key as empty “saleFilters.searchKeyword=’’”. Hope this will help you.

I have a similar issue, and I was able to resolve it by removing the label.

I don’t understand why the Ionic docs for forms contain the label. That really tripped me up.

4 Likes

did you find the solution to this problem?

1 Like

have the same problem with clear button inside “label” tag
see: Howto add delete icon to search input field?

Thing to remember about how ionic deals with setting focus to inputs:

We use labels to to watch for any tap events, then check to see if that label has an input inside of it. If so, set focus to the input.

To use a button along the input, swap the label to a span or div, your ng-clicks will work fine after that.

10 Likes

thanks @mhartington that solved the issue

thanks for pointing that out. i spent some time on this. finally works when i removed the label! thanks!

Here is another way to do this. You can set the on-touch event for the button. Then you can call a function to clear it out. This allows you to wrap the items in a label without using the ng-click event.

http://ionicframework.com/docs/api/directive/onTouch/

4 Likes

removing the label worked for me

I did it like this:

      <div class="item item-input search-input">
        <label class="item-input-wrapper">
          <i class="icon ion-ios-search placeholder-icon field-icon"></i>

          <input
                 type="search"
                 style="width: 100%"
                 placeholder="Type words to search"
                 ng-change="vm.searchWords()"
                 ng-model="vm.data.search"
                 ng-model-options="{updateOn:'default blur',debounce:{default:500,blur:0}}"
                 reset-field>

          <!--
              Clear button, see: https://github.com/driftyco/ionic/issues/405#issuecomment-43958749
              NOTE: I had to use "on-tap" below, becaus ng-click did not work!
          -->
          <a ng-if="vm.data.search.length"
             on-tap="vm.clearSearch()"
             class="input-button button button-icon ion-android-close">
          </a>

        </label>
      </div>

with the CSS style “search-input” defined as:

.search-input {
    padding-top: 8px;
    padding-bottom: 8px;
    padding-right: 10px;
}

this definitely should be documented in the inset inputs part !!
just change the label to span works!!

2 Likes

Ran across this same issue today. Replacing the label tag with a div did the trick

Just in case someone else has same issue, I resolved my case by changing ng-click to on-tap.