Can't Scroll on Second Show of Ionic Modal

I can reproduce this on iOS8 but not in ripple emulator.

I have the following directive:

 .directive('checkList', function ($ionicModal, $parse) {
        return {
            scope: {},

            link: function (scope, element, attr) {

                element.css('cursor', 'pointer');

                var selectedItemsExpression = $parse(attr.selectedItems);

                scope.syncSelectedItems = function () {

                    selectedItemsExpression.assign(scope.$parent,
                        scope.items
                            .filter(function (i) {
                                return i.isSelected;
                            })
                            .map(function (i) {
                                return i.name;
                            }));
                };

                var modal;

                scope.hide = function () {
                    modal.remove();
                    modal = null;
                };

                element.on('click', function () {

                    var selectedItems = selectedItemsExpression(scope.$parent) || [];

                    scope.items = scope.$parent.$eval(attr.items)
                        .map(function (i) {
                            return {
                                name: i,
                                isSelected: selectedItems.indexOf(i) != -1
                            };
                        });

                    if (modal) {
                        modal.show();
                    }
                    else {
                        $ionicModal.fromTemplateUrl('templates/check-list.html', {
                            scope: scope
                        }).then(function (m) {
                            modal = m;
                            modal.show();
                        });
                    }
                });

                element.on('$destroy', function () {
                    if (modal) {
                        modal.remove();
                        modal = null;
                    }
                });
            }
        };
    })

with the following template:

<ion-modal-view>
    <ion-content>

        <div ng-repeat="item in items">
            <ion-checkbox ng-model="item.isSelected" ng-change="syncSelectedItems()">{{item.name}}</ion-checkbox>
        </div>
        <a class="button button-full button-energized" ng-click="$event.stopPropagation();hide()">Done</a>
    </ion-content>

</ion-modal-view>

when the ion-modal is long enough to require scrolling, I can’t touch to scroll it on iOS the second time it’s shown. I can check and uncheck selections just fine, but the scroll does not respond. The first time it’s shown, everything works fine.

I’ve tried not destroying on hide and just show/hiding the modal, but that produces the same result.

I’m using beta 13.

Any help would be greatly appreciated!

This is a real, serious bug in the framework. Is there an intention of fixing it? Or can someone suggest a workaround?

Not sure if this project is still actively maintained but the problem is here:

function keyboardShow(element, elementTop, elementBottom, viewportHeight, keyboardHeight) {
  var details = {
    target: element,
    elementTop: Math.round(elementTop),
    elementBottom: Math.round(elementBottom),
    keyboardHeight: keyboardHeight,
    viewportHeight: viewportHeight
  };

  details.hasPlugin = keyboardHasPlugin();

  details.contentHeight = viewportHeight - keyboardHeight;

  void 0;

  // figure out if the element is under the keyboard
  details.isElementUnderKeyboard = (details.elementBottom > details.contentHeight);

  ionic.keyboard.isOpen = true;

  // send event so the scroll view adjusts
  keyboardActiveElement = element;
  ionic.trigger('scrollChildIntoView', details, true);

  ionic.requestAnimationFrame(function(){
    document.body.classList.add(KEYBOARD_OPEN_CSS);
  });

  // any showing part of the document that isn't within the scroll the user
  // could touchmove and cause some ugly changes to the app, so disable
  // any touchmove events while the keyboard is open using e.preventDefault()
  if (window.navigator.msPointerEnabled) {
    document.addEventListener("MSPointerMove", keyboardPreventDefault, false);
  } else {
    document.addEventListener('touchmove', keyboardPreventDefault, false);
  }

  return details;
}

at this line

    document.addEventListener('touchmove', keyboardPreventDefault, false);

So the keyboard thinks it’s supposed to be shown when tapping on a label which shows the modal view.

Solution:

ionic.keyboard.hide() immediately before modal.show();

I encounter this problem as well, your solution works for me. This is a serious bug, and should be fixed.

Hey @JeffN825 Sorry about the delay on getting to this.

So I took a look at your example, and wasn’t able to replicate the issue. Any chance you could put together a codepen that more accurately demonstrates this?

It only happens on an iOS device

@JeffN825 I used this codepen and wasn’t abel to reproduce the issue. Can you fork this codepen and change it to fit your situation.

Seems like it is happening less frequently on the latest nightly. Could it be fixed?

Copied the very same example as shown, but still, also nothing happens in my case.
Can’t scoll.

I had a similar issue with a repeated input box not being visible when on focus, although the latest nightly has fixed and made it functional now - when the input is clicked on/onfocus it’s like the input is being played like a ping pong it bounces up and down. Much like functions are fighting each other and the fix overules them and show the input in focus correctly. Appreciate Ionic’s ongoing support in fixes and the endless additions in nightlies (thumbs up!)