Proper way to show ionic modal with textarea and keyboard

Question

I have a modal for sending a message, and in order to get the keyboard to show, I have to set the focus on the textarea after triggering the modal.

HTML

  <script id="new-post.html" type="text/ng-template">
  <div class="modal">
    <form ng-submit="sendPost(post)">
      <ion-header-bar class="bar-royal">
          <button class="button button-clear button-light" ng-click="closeNewPost()">Cancel</button>
          <h1 class="title">New Message</h1>
          <button type="submit" class="button button-clear">Post</button>          
      </ion-header-bar>
      <ion-content>

          <div class="list">
            <label class="item item-input">
              <textarea class="textareas" id="postMessageInput" ng-model="$parent.post.message" placeholder="What do you want to say?"  autofocus ></textarea>
            </label>
          </div>
      </ion-content>
    </form>
  </div>

Controller:

$ionicModal.fromTemplateUrl('new-post.html', function(modal) {
    $scope.postModal = modal;
}, {
   scope: $scope,
   focusFirstInput: true
});
$scope.newPost = function() {
    $scope.postModal.show().then(document.getElementById('postMessageInput').focus());    
};

What happens is that the modal slides up first, then the keyboard slides up. Sometimes there's a flicker of the screen while the modal first shows. The whole experience is not smooth at all. Sometimes the textarea is even pushed up under the modal header.

Ideally, I want the modal to slide up with the keyboard already rendered on the view, as though the keyboard is embeded into the modal. That's how other apps (ios) seem to work. Is that possible, or is there a standard method for showing the modal with a keyboard and textarea?

Answer 1

I have fixed the flickering of screen by setting disabling of screen to true:

cordova.plugins.Keyboard.disableScroll(true)

Checkout Ionic Keyboard iOS Notes here