Clear button inside input causes input to loose focus

ionic-v1
1

HTML:

   <ion-header-bar class="item-input-inset">
        <div class="buttons">
          <button class="button button-clear" ng-click="closeSearch()">
                 <img src="img/arrowback.png" class="header-svg-btn">
         </button>
        </div>
        <div class="item-input-wrapper">
          <input type="search" placeholder="Type here..." ng-model="searchTerm.text"
                    ng-model-options="{debounce: 350}" ng-minlength="2" ng-focus="showKeyboard()">
        </div>
        <div class="buttons">
          <button class="button button-clear" ng-click="clearSearch()">
                 <img src="img/cancel.png" class="header-svg-btn" ng-show="searchTerm.text">
          </button>
        </div>
      </ion-header-bar>

JS: simply clear the search text

  $scope.clearSearch = function(){
    $scope.searchTerm.text = "";   
  };

The input looses focus and no keyboard gets hidden. Tested on Nexus 5 Android 5.1.0
Ionic CLI - 1.3.8

It does not work in browser (chrome) too!

2

This problem was vexing me as well. The trick is to use use both data-tap-disabled=“true” and on-touch to handle the click. The keyboard stays up and the focus remains on the input. Without the data-tap-disabled the keyboard retracts.

<div class="list list-inset">
   <div class="item item-input">
      <input type="text" placeholder="mail stop"
            name="mail_stop_name"
      >
      <i class="icon ion-ios-close placeholder-icon"
         data-tap-disabled="true"  on-touch="formData.mail_stop_name = ''"></i>
   </div>
</div>
1 Like