Ionic Chat screen keyboard issues

Ionic Framework ionic-v3
1

I have a chat screen and it has two main issues with the keyboard appearing. I searched all around and couldn’t find a solution. The issues are - and I will mark them as issue 1 and issue 2 so that the replies are clear.

Issue 1: On tapping on the input field the keyboard appears and the whole screen scrolls up including the header, . I am using

.input-cover {  position: static; }

in the scss. The desired behaviour is that the header stays (does not scroll up and disappear from the screen) and only the messages and the input area scrolls up. The solution in this SO https://stackoverflow.com/a/36804830/7544130 leads to the App crashing on iOS.

Issue 2: After typing, on pressing on the send button, the keyboard disappears in iOS. For Android, in the send button function, I use the code below, but it does not work in case iOS.

if (this.platform.is('android')) {
  this.keyboard.show();
}

Anyone found a solution for both or any of the two issues?
Thanks

2

I don’t have a direct answer for you, but you definitely should follow this thread, maybe even offer to be a tester.

3

Working on it more, for Issue 2: The below seems to have fixed it, at least on the iOS simulator. I changed this the actions on the send button from:

<button ion-button outline small (click)="sendChatMessage(chatInput); $event.preventDefault();" class="button button--orange button--outline button--small">Send</button>

to this

<button ion-button outline small (mousedown)="$event.preventDefault()" (click)="sendChatMessage(chatInput)" class="button button--orange button--outline button--small">Send</button>
4

Thanks for the tip, I am afraid I am at a stage in the App development where I cannot really test. If you check above, I think I found a solution for issue 2, now only left is issue 1.