The focus gets lost after 1 or 2 seconds later

1 
<ion-view title="{{processName}}">
<ion-content class="has-header" pdk-next-input-on-enter>
    <div ng-repeat="row in rows" class="row">
        <div ng-repeat="content in row.widgets" class="col col-{{content.percentage}}">
            <div ng-switch on="content.type">
                <div ng-switch-when="label">
                    <div class="input-label" style="white-space: nowrap;color: {{content.foreColor}}">{{content.value}}</div>
                </div>
                <div ng-switch-when="text" class="list">
                    <label class="item item-input"> <!-- style="padding: 0px 0 0px 0px;" -->
                        <span class="input-label">{{content.label}}</span>

                        <div ng-switch on="content.tabOrder" style="width:{{content.percentage}}%">
                            <div ng-switch-when="1">
                                <input type="text" name="{{content.name}}" placeholder="{{content.toolTip}}" ng-value="{{content.value}}" tabindex="{{content.tabOrder}}" autofocus
                                       ng-model="content.value" ng-blur="onTextBlur(content.name, content.value)">
                            </div>
                            <div ng-switch-default>
                                <input type="text" name="{{content.name}}" placeholder="{{content.toolTip}}" ng-value="{{content.value}}" tabindex="{{content.tabOrder}}"
                                       ng-model="content.value" ng-blur="onTextBlur(content.name, content.value)">
                            </div>
                        </div>
                    </label>
                </div>
                <div ng-switch-when="combobox" class="list">
                    <label class="item item-input item-select">
                        <div class="input-label">
                            {{content.label}}
                        </div>
                        <select name="{{content.name}}" ng-model="content.list" ng-options="option.value as option.name for option in content.params"
                                ng-change="onListChange(content.name, content.list)">
                        </select>
                    </label>
                </div>
                <div ng-switch-when="listbox">
                    <ion-scroll style="height: 180px" style="padding-top: 0px">
                        <label class="item item-radio" ng-repeat="param in content.params" style="height: 35px;font-size: 14px;">
                            <input type="radio" name="{{content.name}}">
                            <div class="item-content">
                                {{param.value}}
                            </div>
                            <i class="radio-icon ion-checkmark"></i>
                        </label>
                    </ion-scroll>
                    <!--<select name="{{content.name}}" ng-model="content.list" ng-options="option.value as option.name for option in content.params"-->
                    <!--ng-change="onListChange(content.name, content.list)" size="7" class="col col-{{content.percentage}}" style="white-space: nowrap;">-->
                    <!--</select>-->
                </div>
            </div>
        </div>
    </div>
    <div class="row" ng-show="messageRow">
        <div class="col">
            <p ng-repeat="message in messageRow.widgets" style="color:red">{{message.value}}</p>
        </div>
    </div>
</ion-content>
<footer class="bar bar-footer bar-stable" style="height:50px">
    <div class="button-bar">
        <a class="button" ng-repeat="content in bottomRow.widgets" ng-click="submit(content)" style="padding-top:2px;color:{{content.foreColor}};background: {{content.backColor}}">{{content.value}}</a>
    </div>
</footer>

With above code, the <input> box gets the focus on load. However, it loses after a second or two later.

The same <input> without the <ion-scroll> seems to be working fine…

2

Video demonstrating the issue.

http://ionictests.s3.amazonaws.com/VID_19700111_113959.m4v

3

Hmm, interesting… honestly I’m not sure. Autofocus should be working but I don’t know what could be messing with it. Are you getting any issues in your console?

4

No. there is nothing in the console. It just loses the focus when there is <ion-scroll>.

5

Anything I can do to help you guys debug this?

6

Bump. any help is greatly appreciated.

7

Taking a look at this now. Could you post a codepe?

8

Can you install the ionic keyboard plugin?

9

Installed the ionic keyboard and the issue remains same…

10

Testing more on this issue, I realize that this is not related to ion_scroll, but rather the radio button .

                            <label class="item item-radio" ng-repeat="param in content.params" style="height: 35px;font-size: 14px;">
                            <input type="radio" name="{{content.name}}">

                            <div class="item-content">
                                {{param.value}}
                            </div>
                            <i class="radio-icon ion-checkmark"></i>
                        </label>

If I replace above with <select> or table, I don’t have this focus disappearing issue.

11

Interesting… I’ll bring this up to the devs, but does that solution work for you?

12

Unfortunately no.

Using <select> displays only one row in mobile phone whereas it would work fine in desktop browser.

I was looking at other alternative solution as per your suggestion and that’s how I found this issue…

13

Is there any updates to this?

14

Same issue here - tried Beta-6/7/8 builds in Chrome with device emulation, as well as on Android phone. Setting

<ion-content overflow-scroll="true"...>

fixes the problem of focus loss. But it causes no scroll on keyboard shown so it is unusable. Please advice on how to fix. Thanks!

15

After debugging a bit more, it seems related only to Android (emulated using Chrome, real device) - does not happen for iOS. It seems to be caused by the class “focus-previous-input” being added to the input text boxes. I am not sure what the problem is. Can somebody please suggest pointers on how to debug more? I am stuck at this point.

16

Alright - finally SOLVED. Posting it here so it can help somebody else. On Android, for a pane to scroll up in full-screen mode so that the keyboard does not cover it (and hence steal focus), you need to set the following in your app.run()

ionic.Platform.isFullScreen = true;

You can remove overflow-scroll setting from <ion-content…/> - default ionic scroll works fine. Also, in AndroidManifest.xml, set the following property

android:windowSoftInputMode="adjustResize"

This works without ionic-keyboard plugin as well.

2 Likes
17

Thank you sir! (Or maam!)

This last post just solved two problems I was having:

  1. Flaky inputs losing focus.
  2. Inputs being obscured by the keyboard.

I wasn’t expecting this code to solve #2, but voila! Instead of the keyboard covering up my inputs, the page slides up with the keyboard and keeps focus.

Lovely!

Seems like an obscure thing for a beginner to run across. Shouldn’t this behavior/these options be standard??

Anyway, thanks.

18

Oh man. I thought this problem was solved but I’m having problems with obscured inputs again. Any thoughts?

19

Same problem ! Any updates ?