Popup with multiple text input fields always focuses on 2nd input

ionic-v1
1

I’ve created a popup that has a username and password field with 2 buttons. When the popup opens, the second (password) field is automatically selected, both in testing in Chrome and Firefox and on Android (I haven’t tested any other environments). Is it possible to force the selection/focus to be either on the first field or neither of them?

The codepen is based on the ionic sample codepen given in another thread that demonstrates multiple popup styles. Click the “Multiple” button to see the behavior.

2

So, in the popUp service, this code causes the effect:

  function focusInputOrButton(element) {
    var inputs = element[0].querySelectorAll('input');
    if (!inputs.length) {
      inputs = element[0].querySelectorAll('button');
    }
    var last = inputs[inputs.length-1];
    if(last) {
      last.focus();
    }
  }

If there are no inputs, a button is focused… If there are inputs, the LAST input is focused.

I’ll open a PR to see if that can be fixed.

1 Like
3

See PR : https://github.com/driftyco/ionic/pull/1530

Original Issue : https://github.com/driftyco/ionic/issues/822

4

Thanks for your work on this! I can confirm that your fix corrects the problem I encountered.

Should ionic also look at the html autofocus attribute for input fields so a specific input could be setup in the template as the default focus?

5

Pull Request: https://github.com/calendee/ionic/pull/1

6

@zrgravity I’ve incorporated your changes so that any autofocus field in a pop-up gets the focus. Nice job with that one.

Now, let’s hope it was good enough for the Ionic devs to incorporate.