Scroll from input (touchstart)

ionic-v1
1

I am having the issue of starting to scroll on an input field and I focus on the field instead of continuing to scroll. I have solved this issue on a previous project that does not use Ionic but how do I go about this without direct access to the iScroll functions used for your scroll and container classes.

This is a snippet from the projects code, (I found this fix on stackoverflow).

$('.scrollable').each(function(e){
		var scrollableId = $(this).attr('id');
	    var myScroll = new iScroll(scrollableId, {
	    	vScrollbar: false,
	    	checkDOMChanges: true,
	    	onBeforeScrollStart: function (e) {
	            var target = e.target;
	            while (target.nodeType != 1) target = target.parentNode;
	
	            if (target.tagName != 'SELECT' && target.tagName != 'INPUT' && target.tagName != 'TEXTAREA') {
	                e.preventDefault();
	            }
	        }
	    });
	});

In this fix we are basically checking the state of your touch on touchstart to see if you scroll off the input field or just click on it.

2

Can you post a sample of your input? With Ionic, the scroll will be triggered unless you use labels like :

<div class="list">
  <label class="item item-input">
    <input type="text" placeholder="First Name">
  </label>
  <label class="item item-input">
    <input type="text" placeholder="Last Name">
  </label>
  <label class="item item-input">
    <textarea placeholder="Comments"></textarea>
  </label>
</div>

The labels are used to determine if you want field focus or are initiating a scroll.

3

I’m having the same issue as @thetimcook . If I try to scroll by placing my finger on a texarea or input when beginning a swipe it doesn’t scroll, it puts focus on the texarea and opens the keyboard while the scrolling action is ignored. It doesn’t madder how fast I swipe, the swipe is lost.

Here’s my code, it’s very similar to the code above.

<div class="list list-inset">
    <label class="item item-input">
        <textarea placeholder="Text..." name="text" ng-model="text"></textarea>
    </label>
</div>
4

Ouch. I haven’t really done much with Beta 1 because I’ve been own my own version for about 2 months. I just tested and confirmed that each of your issues do exist in Beta 1.

Unfortunately, the fix is in the Nightlies. So, that means living on the edge.