Ionic-framework: Touchstart on input cancels ion-content scrolling

[ashconnell]

If you have an ion-content element with a tonne of inputs, you cant scroll down because the inputs receive the event and focuses immediately. This happens in chrome, iOS 7.1 and on a nexus 5

Have tried using ion-scroll, ion-content with overflow-scroll='true', with and without labels, nothing seems to work.

Is there a convention here that i don't know about? It seems like a massive game breaker for anyone who wants to use inputs

Latest nightly tested

[adamdbradley]

Yes this is a known issue which @tlancina and I are actively working on. A cross platform/browser solution isn't as simple as one would think. Once we iron out the keyboard and focus issues then touchstart scrolling when the target is the input is next our next priority.

We're making sure to work on them separately because one drastically affects the other so need to get the keyboard/focus issues 100% first (heavily tested with both unit tests and on physical devices).

[rvanbaalen]

@adamdbradley If you need any device testing on this issue, let me know. We have a Galaxy S4 (Android 4.3) Galaxy S3 Mini (Android 4.2.1) Galaxy S1 (Android 2.3.6) iPhone 4 (iOS 7.1) and iPhone 5 (iOS 7.1) all rigged with an Ionic app full of input's and other fancy stuff, ready to test.

[adamdbradley]

@rvanbaalen That'd be great thanks. I'll update this post when we get our updates in the nightly build.

[rvanbaalen]

You're welcome. It's the least I can do since I really need that update before our app launches and that deadline is getting closer and closer.

[adamdbradley]

Notes:

• This line is not allowing scroll to happen when the touchstart target is an input: https://github.com/driftyco/ionic/blob/66ecec7031ae472351da6a192364097e889d96a8/js/views/scrollView.js#L620
• If you remove the input|textarea|select part of the match, then the scroll works even if you touchstart on an input
• However, you cannot tap and hold on an input to change the text (the default is prevented, which disables selecting text). Removing the ability to edit input text is the primary reason for not allowing scrolling when the target was an input, but is the issue to resolve and what testing should focus on.

[adamdbradley]

The changes are in nightly, build 1609, or later. Would I be able to ask this group to test it out?

A few notes:

• The very first tap on text within an text input may not always place the cursor where you'd expect it.
• There are still issues with the blinking cursor showing in the wrong location after scrolling, this is a separate issue.
• The keyboard may still cover up an input after focusing on it. This is also a separate issue and @tlancina is making great progress with it.

Please let us know how the testing goes, thanks.

[gylippus]

Hi @adamdbradley, I was looking around for anything to do with inputs/touch/range and these were the closest changes I could find. I haven't updated to nightly since but at some point range sliders stopped working. Sorry if this is the wrong place to mention this. I was trying to see if I could find the problem myself to help out but got stuck.

http://codepen.io/anon/pen/mLBwA

[rvanbaalen]

@gylippus You can either make a new issue or use the search function and check related issues:
https://github.com/driftyco/ionic/issues/257
https://github.com/driftyco/ionic/issues/492

[ashconnell]

So far scrolling looks okay in the situations we use inputs. I'll update more info after we try on all of our test devices

[adamdbradley]

Testing time! Fixes have been put into master, and any help would be appreciated:
http://code.ionicframework.com/#nightly

Thanks

[rvanbaalen]

Im on it! :+1:

[CoenWarmer]

Me too! Thanks guys!

[rvanbaalen]

Fixed on Galaxy S4 (android 4.3) and iPhone 4 (iOS7.1)

Will be testing on Galaxy S3 Mini (4.1.2) and iPhone 5 (7.1) later.

[peeter-tomberg]

@adamdbradley Has this issue reappeared on iOS? I cant seem to scroll a page whenever I touch an input / span.input-label and drag up / down.

<div class="list">
    <label class="item item-input item-stacked-label item-borderless">
        <span class="input-label">label<strong>extra</strong></span>
        <div class="range">
            <input type="range" min="1" max="100" value="1">
        </div>
    </label>
    <label class="item item-input item-stacked-label item-borderless">
        <span class="input-label">label</span>
        <input type="text">
    </label>
</div>

The error occurs on the text input. Does not occur on the range input.

[gary149]

Yes, seems I have the problem too on ios

[bownie]

Slight twist on this issue I think is using a range input in a modal the input doesn't get the events at all under ios9. I've tried turning off scroll on the ion-content but still no joy. Works in the browser but not on the simulator or device.

[peeter-tomberg]

@adamdbradley reopen perhaps?

[bownie]

Apparently I can't reopen this issue because I didn't raise it. Perhaps I'll raise a new issue and link to this one if I can.

[gary149]

Yes @bownie - cannot find why it's not working... keep searching. If someone can reopen

[briankasingli]

@gary149
Simply remove the attribute => overflow-scroll="true" from ion-content, and you'll be well on your way.

[briankasingli]

Simply remove overflow-scroll="true" from ion-content, and you'll be well on your way!

[tomkaba]

@briankasingli @adamdbradley What if for some reason I need to use overflow-scroll="true" ...is there any workaround to make form inputs not receiving events while scrolling? (problem is only in iOS, android works fine)

[briankasingli]

@tomkaba after spending 60 hours on this problem, I found a work around that enables you to scroll (ion-content, over-scroll="true") when the input field is focused (selected).

Essentially, the reason why you cant scroll when the input field is focused is because the input field, and targeted container that you want to scroll in lives within another "ion-content". The first "ion-content" will create some special classes which restricts you from scrolling content when your focused in the input field.

My code looks something like this =>

<!-------------- #1 ION CONTENT HERE (scroll="false" to lock your app in place) ---------------->
<ion-content id="mainContent" scroll="false">
   <form>
      <input type="text" /> 
   </form>
<!-------------- #2 ION CONTENT HERE (with overflow scroll, using anchor scroll) ---------------->
   <ion-content overflow-scroll="true">
      <ion-list>
          <ion-item ng-repeat="users">
           {{users}}
          </ion-item>
      <ion-list>
   </ion-content>
</ion-content>

My Solution:
I've done two things once when the app is loaded.

1. $("#mainContent").removeClass("scroll-content"); // ionic-content generates special classes for the HTML element, one of them is "scroll-content". This CSS class ("scroll-content") restricts you to scroll your ionic-list when your focused in the input field when you have overflow-scroll="true" set in the "ionic-list's" parent div ("ion-content" => "example above").
2. cordova.plugins.Keyboard.disableScroll(true); // once the class is removed, your whole app is scrollable, making it look weird. Lock you app again by calling this function. This function requires a plugin => https://github.com/driftyco/ionic-plugin-keyboard.

This solution worked for me, let me know if it worked for you.

[Manduro]

@adamdbradley This is an issue again, but only on iOS and only with native scrolling enabled. It should be reopened.

Update: It seems it's only an issue when there is a label tag wrapped around the input. I'm creating a new issue for this.

Update: new issue at #5102

[seanislegend]

Just been tearing my hair out trying to fix this issue. I can confirm what @Manduro says; it only blocks scrolling with a label wrapper, not a div wrapper. This change fixed it for me - hopefully it will for someone else too! Thank you.

[dudeofea]

@Manduro I tried replacing labels with divs, but that didn't do the trick on iOS for me. It's probably since I was embedding the labels / inputs in a popup rather than just in ion-content. replacing the inputs with textareas worked though. Must be something weird going on with the inputs and touch events

[barocsi]

+1

[judezhu]

+1

[philipbrack]

Hello I am using [email protected] and [email protected]. I am seeing this same issue. I need the overflow-scroll="true" in order to make the form look OK, however now the user cannot scroll on the input elements and that looks terrible again. does anyone have a good workaround?

<ion-content overflow-scroll="true">
    </div>
        <form>

[briankasingli]

@philipbrack did you try my solution?

[shivenigma]

is this fixed? I am tired of ionic and iOS quirks. sure ionic is a great framework but it have big issues that needs to be addressed especially on ios like scroll, blank screen on input focus, blur.etc.

[mattleonard]

+1

[R1Daneel]

+1

[Ross-Rawlins]

+1

[MoisesValera]

+1 @briankasingli nice answer, exactly what i was looking for, my app was a mess, thank you man

[briankasingli]

@Elijax thats great news!

[jblamber]

+1 still relevant! Using divs instead of labels, and removing overflow scroll fixed the issue for me on ios.

[pavanidasari]

Replace IonicModule.forRoot(MyApp)
in your app.module.ts with

IonicModule.forRoot(MyApp,
  {
    scrollAssist: false,    // Valid options appear to be [true, false]
    autoFocusAssist: false  // Valid options appear to be ['instant', 'delay', false]
  }
)

[ionitron-bot[bot]]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.