300 ms delay in IOS clearing a text field using a button

ionic-v1
1

I have implemented a common interface. A text field with a button that clears the text. The button appears as soon as there is text in the field. The problem is specific to iOS. In the code sample, I disable tap events on the the clear button (data-tap-disabled=“true”) so that focus is not lost when the button is clicked, but it’s ng-click action still taken. Loss of focus would cause the keyboard to go down. The solution seems quite reliable.

The problem I’m observing is that when I click the button there is a delay before the text is cleared. I’m guessing this might be the 300 ms issue. I am using Ionic 1.0 without any other plugins. This sample code comes straight from the starter blank project. There’s no point in putting this on codepen since it needs to be run in an iOS emulator. So here it is.

ionic platform add ios
ionic run --emulator

Any ideas?
Thanks
Jason

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <title></title>

    <link href="lib/ionic/css/ionic.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">
    <script src="lib/ionic/js/ionic.bundle.js"></script>
    <!-- cordova script (this will be a 404 during development) -->
    <script src="cordova.js"></script>
    <script>
      angular.module('starter', ['ionic'])
      .run(function($ionicPlatform) {
        $ionicPlatform.ready(function() {
         // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
         // for form inputs)
         if(window.cordova && window.cordova.plugins.Keyboard) {
           cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
         }
         if(window.StatusBar) {
           StatusBar.styleDefault();
         }
        });
      })
      
      .controller (
      'MyController', [ '$scope', function ($scope) {
      
         $scope.formData = {};
         $scope.formData.first_name = '';
      
      }]);
    </script>
  </head>
  <body ng-app="starter" ng-controller="MyController">

    <ion-pane>
      <ion-header-bar class="bar-stable">
        <h1 class="title">Ionic Blank Starter</h1>
      </ion-header-bar>
      <ion-content>
      
            <div class="row row-center item">
                <div class="col col-5 " style="max-width: 30px"></div>
                <div class="col col-30" style="max-width: 140px">
                    First name:
                </div>
                <div class="col item-input">
                    <input type="text"
                  ng-model="formData.recipient_first_name"
                  placeholder="first name"
                  name="recipient_first_name"
                  autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false"
                  />
                </div>
                <div class="col col-10 col-center">
                    <!-- using ng-if seems because ng-show causes a UI repaint (bounce) in iOS -->
                    <!-- data-tap-disabled="true" prevents the button from receiving tap events that
                    cause the text input to lose focus. See:

                    http://ionicframework.com/docs/api/page/tap/
                    -->

                    <i ng-if="formData.recipient_first_name.length"
                       class="icon ion-ios-close ion-ios-close-outline large-icon"
                       data-tap-disabled="true"
                       ng-click="formData.recipient_first_name = ''"></i>
                </div>
            </div>
      </ion-content>
    </ion-pane>
  </body>
</html>