CODEWITHSUNDEEP
ioscordovaionic-framework
Aleksandr Movsesyan
Aleksandr Movsesyan

Reputation: 447

ionic framework iOS input focus issues

I am currently having trouble with focus on my inputs for iOS. It works perfectly on Android, but for some reason something is going with iOS where sometimes it takes multiple clicks before it actually registers a click event on the input and opens the keyboard with focus in the input and other times it gives focus to some random element behind the visible one so the keyboard opens, but the input field doesn't have focus. We have multiple inputs that are hidden behind the visible one, but I don't think that should matter.

Ionic info:
Your system information:
Cordova CLI: 6.2.0
Ionic Framework Version: 1.3.1
Ionic CLI Version: 2.1.1
Ionic App Lib Version: 2.1.1
ios-deploy version: 1.8.6
ios-sim version: 5.0.8
OS: Mac OS X Sierra
Node Version: v6.3.0
Xcode version: Xcode 8.0 Build version 8A218a

A basic outline of our code can be found here: http://codepen.io/anon/pen/wzYEQk

<ion-view title="COMPANY" hide-back-button="true" can-swipe-back="false">
  <ion-content class="background-cntr" delegate-handle="mainScroll">
    SOME HTML CONTENT
  </ion-content>
  <ion-footer-bar>
    <div class="list">
          <div class="item item-input-inset">
        <label class="item-input-wrapper">
          <input type="text"/>
                    <input type="text" style="display:none;"/>
        </label>
        <button>Test</button>
      </div>
    </div>
  </ion-footer-bar>
</ion-view>

Does anyone know how to solve this?

Upvotes: 2

Views: 6214

Answers (3)

Lakshay Sharma
Lakshay Sharma

Reputation: 1

Remember adding this preference tag on my config.xml file before.

<preference name="KeyboardDisplayRequiresUserAction" value="false" />

This made the autofocus work before.

Upvotes: 2

Aleksandr Movsesyan
Aleksandr Movsesyan

Reputation: 447

I have figured out the solution and to make it work better. Instead of having all the inputs within the footer, I add and remove them every time. That way there is only ever one input within the footer. This seems to work fairly well. The second thing I did was to handle the phantom keyboard case by add the following code to the controller.

window.addEventListener('native.keyboardshow', function(){
  if (document.activeElement.nodeName !== "INPUT") {
    var activeElement = document.querySelector("#chat_footer_inputs input");
    if (activeElement) {
      activeElement.focus();
      $ionicScrollDelegate.scrollBottom(true);
    }
  }
});

Upvotes: 1

Eren Akkus
Eren Akkus

Reputation: 471

JS

angular.module('ionicApp', ['ionic'])
.factory('focus', function($timeout, $window) {
        return function(id) {
            $timeout(function() {
                var element =     $window.document.getElementById(id);
                if(element)
                    element.focus();
            });
        };
    })
.controller('MyCtrl', function($scope, focus) {
 focus("myInput")

});

HTML

<html ng-app="ionicApp">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">

    <title>Input trouble on iOS</title>

    <link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet">
    <script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>

  </head>
  <body ng-controller="MyCtrl">
    <ion-view title="COMPANY" hide-back-button="true" can-swipe-back="false">
      <ion-content class="background-cntr" delegate-handle="mainScroll">
        SOME HTML CONTENT
      </ion-content>
      <ion-footer-bar>
        <div class="list">
              <div class="item item-input-inset">
            <label class="item-input-wrapper">
              <input type="text"/>
                        <input type="text" style="display:none;"/>
            </label>
            <button>Test</button>
          </div>
        </div>
      </ion-footer-bar>
    </ion-view>

  </body>
</html>

Upvotes: 0

Related Questions