[+Video] Touching text input inside ion-content breaks touch scrolling

We had reports of scrolling being unusable in our app and narrowed it down to a condensed scenario with video for you to review. It is reproducible in both iOS and Android

In our ionic app we have some content that needs to native scroll with overflow:auto. So we wrap it in a div that has data-tap-disabled=“true”. That works fine. But if the user touches a textbox that is within < ion-content >, touch scrolling breaks. If they touch away from the textbox, scrolling works again.

Also of note is that scrolling doesn’t break if the textbox is outside of < ion-content >, but only if you didnt touch a textbox inside < ion-content > first. Here are the scenarios shown in the video:

touchscroll–>touch textbox inside ionic–>touchscroll = doesn’t work
touchscroll–>touch textbox inside ionic–>touch blank–>touchscroll = works
touchscroll–>touch textbox outside ionic–>touchscroll = works
touchscroll–>touch textbox inside ionic–>touch textbox outside ionic–>touchscroll = doesn’t work
touchscroll–>touch textbox inside ionic–>touch textbox outside ionic–>touch blank–>touchscroll = works

So it seems like there is a bug where ionic disables scrolling if a textbox within it gets focus until no textbox anywhere has focus.

Here is the link to the video:

Video of Bug

Here is the code used for the demo app:

    <!DOCTYPE html>
<html lang="en" ng-app="demo">
   <head>
      <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui"/>
      <script src="http://code.ionicframework.com/1.0.0-rc.3/js/ionic.bundle.min.js"></script>
      <script>
	 var app = angular.module('demo', ['ionic']);
	 app.controller('DemoCtrl', function($scope, $http, $timeout, $interval) {
	 });
      </script>
   </head>
   <body ng-controller="DemoCtrl">
      <ion-content>
	 <div data-tap-disabled="true" style="border:1px solid;">
	    <ul style="overflow-y:auto;height:100px;">
	       <li>
		  <ul>
		     <li ng-repeat="a in 'abcdefghijklmnopqrstuvwxyz'.split('')">{{a}}</li>
		  </ul>
	       </li>
	    </ul>
	    <input type="text" value="inside ion-content"></input>
	 </div>
      </ion-content>
      <input type="text" value="outside ion-content"></input>
   </body>
</html>

So an update, we narrowed this down to keyboardPreventDefault in ionic. We added some code in keyboardShow to do a check for isElementTapDisabled to get it to work. Can the ionic team look into adding this?

  if(! ionic.tap.isElementTapDisabled(element)) { //we added this line
     if (window.navigator.msPointerEnabled) {
       document.addEventListener("MSPointerMove", keyboardPreventDefault, false);
     } else {
       document.addEventListener('touchmove', keyboardPreventDefault, false);
     }
  } //we added this line