Pop-up form pushed off screen do to auto-focus


#1

When using a complex ionicPopup with a single input field, the form is pushed off the screen due to the auto-focus on the input element opening the native keyboard in iOS.

Form is pushed partly of screen with keyboard open on auto-focus:

However, if I modify ionic.bundle.js such that there is no auto-focus selection in the pop-up, and then I bring focus to the field, the pop-up form auto-scrolls to a much more suitable position.

Change to ionic.bundle.js:

  function focusInputOrButton(element) {
var focusOn = element[0].querySelector('input[autofocus]');
// if (!focusOn) {
//   focusOn = element[0].querySelector('input');
//   if (!focusOn) {
//     var buttons = element[0].querySelectorAll('button');
//     focusOn = buttons[buttons.length-1];
//   }
// }
if(focusOn) {
  focusOn.focus();
}

}

No auto-focus so keyboard does not open:

Bring focus to input field and complete form is visible:

Is there anyway to change the auto-scroll such the form stays in view correctly?


#2

Commit #49a295 in the v1.0.0-beta.11 release will fix this issue by not setting a default auto-focus to the first input or button.


#3

Is there a way to use autofocus with ionicPopup and avoid scrolling the dialog off the top of the page?

With beta11 autofocus is not the default behavior but setting the attribute causes to scrolling as in the screen shot above. It seems like the desired use case for simple popup requests is to show the keyboard rather than forcing the user to click again in the single input field.