Ion-input in ion-footer looses style and placeholder text when keyboard is open

@karolpivo wrote:

When the keyboard is open the input field looses the placeholder text and the send icon.

This only happens on iOS.

I tired using elementRef and renderer to overwrite the style when the keyboardDidShow event is emitted. This works but only the first time. If the keyboard hides and then shows again the renderer does not overwrite it - the event is emitted I’m logging it out to verify.

this is the rendered code:

  ionViewDidLoad() {


    fromEvent(window, 'keyboardDidShow').subscribe( (event) => {

      console.log("keyboard open in event")
      this.renderer.setStyle(this.chatInput["_elementRef"].nativeElement, 'backgroundColor', '#000')

    });

Template code:

<ion-footer>

  <ion-toolbar>
    <ion-item no-lines #chatInput>
      <ion-input spellcheck="true" autoComplete="true" autocorrect="true" maxlength="500" type="text" (keyup.enter)="sendMessage(newMessage); newMessage=''" placeholder="Type your message..." [(ngModel)]="newMessage"></ion-input>
      <button  ion-button item-right (click)="sendMessage(newMessage); newMessage=''">
        <ion-icon name="send"></ion-icon>
      </button>
    </ion-item>
  </ion-toolbar>

</ion-footer>

Relevant Plugins:

cordova-plugin-ionic-keyboard 2.1.3 “cordova-plugin-ionic-keyboard”
cordova-plugin-ionic-webview 1.2.1 “cordova-plugin-ionic-webview”

Yes, webview is an older version, I tried the latest 2x but it didn’t solve the issue.

Platfrom IOS: 4.5.5

ionic 3.9.2 with angular 5.2.11

Any suggestion on how to fix this please?

Posts: 1

Participants: 1

Read full topic