ionic-team / ionic-v1

The repo for Ionic 1.x. For the latest version of Ionic, please see https://github.com/ionic-team/ionic
Other
192 stars 187 forks source link

Ionic numeric input blinking in custom html popup #270

Open mareksip opened 7 years ago

mareksip commented 7 years ago

Short description of the problem:

I have experienced blinkink issue when clicking on ionic popup's input of type 'number'. Suddently part of the popup starts blinkin.

What behavior are you expecting?

After switching to system numeric keyboard, popup should not be blinking.

Video of issue: https://youtu.be/TMlYMoCd20g

Which Ionic Version?

"version": "1.3.1", "codename": "el salvador", "date": "2016-05-12", "time": "18:20:54"

Code to reproduce

 var cnt =
        '<div class="row" ng-if="variableName == true"> <label class="item item-input"> <span class="input-label">{{"name" | translate}}:</span> <input type="text" ng-model="newName" ng-change="changeName(newName)"> </label> </div>' +
        '<div class="row" ng-if="variablePrice == true"> <label class="item item-input"> <span class="input-label">{{"salesPrice" | translate}}:</span> <input type="number" ng-model="newPrice" ng-change="changePrice(newPrice)"> </label> </div>' +
        '<div class="row"><div class="col col-15"><button class="button button-assertive icon ion-minus" ng-click="decreaseQuantity()"></button></div>' +
        '<div class="col col-50"><label class="item item-input"> <i class="icon placeholder-icon"></i>' + '<input type="number" ng-model="receiptQuantity" ng-change="changeQuantity(receiptQuantity)"></label></div>' +
        '<div class="col col-15"><button class="button button-balanced icon ion-plus" ng-click="increaseQuantity()"></button></div></div>';

    var qtPopup = $ionicPopup.alert({
      template: cnt,
      title: translation.qtText,
      subTitle: translation.qtNote,
      scope: $scope,
      buttons: [{
        text: translation.confirmationCancel
      }, {
        text: '<b>' + translation.select + '</b>',
        type: 'button-positive',
        onTap: function (e) {
          if (!$scope.receiptQuantity) {
            e.preventDefault();
          } else {
            $scope.addProduct(product);
            console.log('Tapped! ' + $scope.receiptQuantity);
          }
        }
      }]
    });

Run ionic info from terminal/cmd prompt: (paste output below)

Cordova CLI: 7.0.1 Ionic CLI Version: 2.2.2 Ionic App Lib Version: 2.1.7 ios-deploy version: Not installed ios-sim version: Not installed OS: Windows 10 Node Version: v6.10.1 Xcode version: Not installed

Device information: Android version: 5.1

Thank you for any input.