About to give up with IONIC 3 - Simple Native-like chat page not possible

I tried this in a scratch project and it did:

<ion-label (click)="labelClicked()">fake button</ion-label>

  labelClicked(): void {
    alert('label clicked');
  }

Worked whether or not the <ion-label> was inside an <ion-item>.

<ion-footer>
	<ion-toolbar>
		<ion-buttons right>
			<button icon-only item-right (mousedown)="sendMessage($event)" id="send-button">
          <ion-icon name="send"></ion-icon>
        </button>
			<ion-label (click)="labelClicked()">fake button</ion-label>
		</ion-buttons>

	</ion-toolbar>
</ion-footer>

It seems like when the label is wrapped by ion-buttons it does not generate the click event but if for example it is just inside the ion-toolbar tag it does

The $64,000 question is whether it is capable of sending the message without having the keyboard drop. If it is, then it seems like everything else can be worked around with styling.

I have just checked, unfortunately the keyboard still drops in the same way.

If you have a look at my test repo the latest commit

entitled “Keyboard stays up but scrolling now broken”

Demonstrates a way to keep the keyboard up. However, although this keeps the keyboard up well, there are other weird side effects as demonstrated by the video and pictures below (tested in ios real device).

Youtube video as we can only upload gifs on here: https://www.youtube.com/watch?v=M3ud-oax7sc&feature=youtu.be

I have exported various still frames from the video to show more clearly the weird intermediate states that are apparent when the keyboard is hidden (keyboard is hidden upon tapping the message area). Interestingly this shows that the suggestion bar is actually lurking around.

Hope this helps to further clarify the issue.

About “not to mention trying to create an elastic text area for the input text” of your original question @Alexmady … there you go:

Thanks for input, I will try this out, the main difficulty with this is also in terms of the scrolling when the keyboard/input field/suggestions bar moves up and down.

Still stuck on the main issue with the keyboard not staying up…

I don’t know that one sorry :frowning:

Crux of the issue is demonstrated in the video below and the following images.

@Alexmady so you managed to keep the keyboard open right according your video?

If not, maybe see what @edgebal (third post from the end of the topic) wrote there

Hey

I saw what @edgebal wrote but it does not work when using ionic 2/3 on and
iOS device.

I have managed to find another way to keep the keyboard open, but there are
side effects when the keyboard is finally hidden as demonstrated by the
video and screenshots above.

The code that keeps the keyboard up is

If we can work out a way to fix the side effects we will be on to
something…

2 Likes

Not sure if his helps:

ios-input-fields-keyboard-popup-behavior-unacceptable
but it solved the erratic keyboard up/down behaviour for me. Here is how I configure the platform settings in app.module.ts:

platforms: {
                ios: {
                    scrollAssist: false,  // fake input element to support native keyboard stay up - not needed
                    autoFocusAssist: false,
                    inputBlurring: false, // needed to stop keyboard hiding during scrolling - not needed
                }
            }

Unfortunately no combination I can find of the settings solve the issues mentioned… Thanks for advice though - I had not come across these options before.

This whole issue is made worse specifically by ionic 3, in ionic 2 there were still problems… but with Ionic 3 its even worse.

Which whole issue? The all keyboard subject itself or the fact that the keyboard doesn’t stay open?

If you speak about the all keyboard, sorry, I’m maybe lucky, but I didn’t noticed any changes from Ionic 2 to 3.

If you are speaking about “how to keep the keyboard open” functionnality, is there already a feature request open in the Ionic github tracking system or on the cordova keyboard plugin side? If not, have you a public repo? Then you could maybe open a feature request in on of these projects?

For example do you have a suggestions bar or autocorrect or spellcheck in
ionic 3 with your keyboard?

I managed to find a way to keep the keyboard open as detailed above, but
the side effects, as per YouTube video the become the issue. Example repo
is also mentioned above

No I don’t have because I think it doesn’t exist yet. But I didn’t checked all the functionnalities.

But if you or no one really find a solution, then I would advice to open feature request.

1 Like

Somebody has posted a workaround (in the form of a directive) to fix spellcheck/correct on the Ionic github:

2 Likes

thanks a lot, this workaround works well although spellcheck doesn’t actually work only suggestions.

In other news, made some decent progress. Now have a not so shabby chat screen shaping up. more to follow

I would like to add that with:

      platforms: {
        ios: {
          scrollAssist: false, 
          autoFocusAssist: false,
          inputBlurring: false
        }

and an added HostListener for window:native.keyboardhide like this:

   @HostListener('window:native.keyboardhide', ['$event'])
   onKeyboardWillHide(ev) {
     ev.preventDefault();
   }

I also managed to keep the keyboard up on iOS. On android it was enough to preventDefault() on the keyUp.enter event. Just so you know. Good to hear you finally made some progress.

1 Like