iOS Native Keyboard hides the content

[marlburrow]

Hello,

I’ve a Keyboard issue with my chat application (only tested on iOS device)

As you can see on the screenshots below, the native iOS keyboard hides the chat content, but i would like that the keyboard pushs the content on top

I’ve searched a lot but I have not found anything about this issue.

Here is a light version of my chat view:

<ion-view hide-back-button="true" view-title="Chat with {{contact.display_name}}">
  <ion-nav-buttons side="left">
    <a ng-href="#/tab/chats" class="button button-icon button-clear ion-android-chat"></a>
  </ion-nav-buttons>
  <ion-content class="padding" keyboard-attach>
    <ol class="messages">
      <li ng-repeat="message in data.chat.messages track by $index">
        <!-- Item -->
      </li>
    </ol>
  </ion-content>
  <form ng-submit="sendMessage(input.message)" novalidate>
    <ion-footer-bar align-title="left" class="item-input-inset">
      <label class="item-input-wrapper">
        <i class="icon ion-ios7-search placeholder-icon"></i>
        <input ng-model="input.message" type="search" placeholder="Your message here">
      </label>
      <button class="button button-clear" ng-disabled="!input.message || input.message === ''">
        Send
      </button>
    </ion-footer-bar>
  </form>
</ion-view>

Thank you

[sdhull]

I’m also having this problem. I thought that maybe reverting to js-scrolling would fix it, however that didn’t do it for me either.

What I have found – if it’s any consolation – is that once you start typing, the input scrolls into view. It’s just confusing at first.

@tim is there any chance a future build might scroll the active input into view before the first keystroke?

[sdhull]

Working on debugging this today.

> ionic.version
"1.2.4-nightly-1917"

In Chrome (of course) this problem doesn’t occur at all.

I thought I had come up with a clever hack – attach a handler to focus of textareas that would add a character and remove it, in order to force whatever it is that’s showing the textarea to do its thing.

What I found was strange. In debugging, I decided to just set the field to “foo” so I could be sure it was doing something.

<textarea rows="6" ng-model="textArea.value" ng-focus="scrollHack($event)"></textarea>

$scope.scrollHack = function(event) {
  $timeout(function(){
    var originalVal = event.target.value;
    var newVal = originalVal + "foo";
    event.target.value = newVal;
  }, 100);
  //event.target.value = originalVal;
  return;
};

Here’s a video of me playing with it. Let me break down what happens in the video, as I understand it:

1. I click the textarea, it pauses in a debugger in my scrollHack method. At this point, the behavior is correct, in that it shows the input.
2. I click the “Continue” button in the debugger, and then 2 things happen:
3. the view adjusts and the input is hidden behind the keyboard (WHY!!!???) AND
4. js is paused in my debugger again. This is because I change the value of the textarea in this method (I verified by emptying the method and re-running this experiment). I presume it’s angular magic that prevents an infinite loop, but somehow an infinite loops is indeed prevented.
5. So I click “Continue” again and now we’re out of the debugger and the input is covered by the keyboard (though the value is “foo”, as that’s what it was set to by my scrollHack method). I type “Y” and now the input scrolls into view and you see “fooY” in the textarea.
6. I remove the breakpoint and click the textarea again so you can see this all in fast motion.

Back at square 1. So much for a hacky work-around.

[shrhawk]

@marlburrow, @sdhull facing the same issue is this fixed without hack ?

[kov_lxrumba]

ughhhh !! I am facing the same issue. The textArea is hidden under keyboard, until a key is pressed. I wonder if somebody has a hackaround issued for that.

[anicacute09]

if it is in android you need to go to androidmanifest and use adjustResize… another way around is:

window.addEventListener('native.keyboardshow', keyboardShowHandler);

        function keyboardShowHandler(e, scrollBottom, timeout, ionicScrollDelegate){
            $ionicScrollDelegate.resize();
        }

        window.addEventListener('native.keyboardhide', keyboardHideHandler);

        function keyboardHideHandler(e, scrollBottom, timeout, ionicScrollDelegate){
            $ionicScrollDelegate.resize();
        }