Ionic-framework: Native keyboard word suggestions not working in iOS

[themastersoda]

Ionic version: (check one with "x")
[ ] 1.x
[X] 2.x

I'm submitting a ... (check one with "x")
[X] bug report
[ ] feature request
[ ] support request

Current behavior:
Native keyboard in iOS does not display word suggestions even though ion-input attribute autocomplete is set to true / on. Everything works as expected on Android devices though.

Expected behavior:
Native keyboard should display word suggestions if ion-input attribute autocomplete is set to true / on on both iOS and Android.

Steps to reproduce:
I have created a repository displaying the issue Github repo
I've added several ion-inputs with different combination of attributes to show the issue. Running the app on Android device we can see that keyboard shows suggestions if autocomplete attribute is present, however iOS simply does not care and never displays anything. Tried enabling keyboardAccessoryBar just in case, but that does not help in any way as well.

<ion-list>
    <ion-item>
      <ion-label>No attributes set:</ion-label>
<!-- No text suggestions on any platform, working as expected -->
      <ion-input type="text" [(ngModel)]="text1" name="text1" id="text1"></ion-input>
    </ion-item>
    <ion-item>
      <ion-label>autocomplete="true":</ion-label>
<!-- Works on Android, not on iOS -->
      <ion-input autocomplete="true" type="text" [(ngModel)]="text2" name="text2" id="text2"></ion-input>
    </ion-item>
    <ion-item>
      <ion-label>autocomplete="on":</ion-label>
<!-- Works on Android, not on iOS -->
      <ion-input autocomplete="on" type="text" [(ngModel)]="text3" name="text3" id="text3"></ion-input>
    </ion-item>
    <ion-item>
      <ion-label>autocomplete="on" spellcheck="true":</ion-label>
<!-- Works on Android, not on iOS -->
      <ion-input autocomplete="on" spellcheck="true" type="text" [(ngModel)]="text4" name="text4" id="text4"></ion-input>
    </ion-item>
    <ion-item>
      <ion-label>autocomplete="on":</ion-label>
<!-- Works on Android, not on iOS -->
      <ion-textarea autocomplete="on" spellcheck="true" rows="1" [(ngModel)]="text5" name="text5" id="text5"></ion-textarea>
    </ion-item>
  </ion-list>

Ionic info: (run ionic info from a terminal/cmd prompt and paste output below):

Cordova CLI: 6.5.0
Ionic Framework Version: 2.2.0
Ionic CLI Version: 2.2.1
Ionic App Lib Version: 2.2.0
Ionic App Scripts Version: 1.1.4
ios-deploy version: 1.9.0
ios-sim version: 5.0.13
OS: OS X El Capitan
Node Version: v6.9.1
Xcode version: Xcode 8.2.1 Build version 8C1002

[Manduro]

Besides word suggestions, autocorrect isn't working either. This might be a Cordova limitation at the moment though!

[themastersoda]

It's really strange how this problem only exists in iOS. Maybe there are some limitations related to WkWebView that prevents html inputs from acting like native ones?

[rodneicouto]

You have to add the attributes to the input, not ion-input.

My Workaround is:

import {Directive, ElementRef, Renderer, AfterViewInit} from "@angular/core";

@Directive({
  selector: '[keyboardFix]'
})

export class keyboardFix implements AfterViewInit {

  constructor (private _elRef: ElementRef, private _renderer: Renderer) {}

  ngAfterViewInit() {

    let input = null;

    if( this._elRef.nativeElement.tagName === 'ION-TEXTAREA') {
        input = this._elRef.nativeElement.querySelector("textarea");
    } else {
        input = this._elRef.nativeElement.querySelector("input");
    } 

    if( input ) {
        this._renderer.setElementAttribute(input, 'autoComplete', 'true');
        this._renderer.setElementAttribute(input, 'spellcheck', 'true');
        this._renderer.setElementAttribute(input, 'autocorrect', 'true');
    }   

  }

}

and use like this

 <ion-input keyboardFix type="text"  [(ngModel)]="i.streetName"></ion-input> 

[hussainb]

same issue in android too

[jgfet]

Nice idea. I wanted to go opposite way turning all that stuff off. this._renderer.setElementAttribute(input, 'autocapitalize', 'off');
this._renderer.setElementAttribute(input, 'autocomplete', 'off');
this._renderer.setElementAttribute(input, 'spellcheck', 'false');
this._renderer.setElementAttribute(input, 'autocorrect', 'off');
I'd change class name to be upper case, decorator does the work of making it keyboardFix..
Also autocomplete is not camel case - all lower case. See https://davidwalsh.name/disable-autocorrect https://developer.mozilla.org/en/docs/Web/HTML/Element/input And I think they are on or off - not true of false - except for spellcheck

[gabriellecozart]

Still having this issue. @rodneicouto 's solution does not work for ionic 3 it seems.

[martinhanke]

This worked for me on ios: https://forum.ionicframework.com/t/ionic-input-textarea-spellcheck-or-auto-complete-on-android/73233/12

use autocorrect="on"

[gabriellecozart]

@martinhanke I tried this solution for iOS using ionic 3 and it did not work for me. I'll try once more to see if there were other factors.

[martinhanke]

@gabriellecozart I'm using latest ionic (3.6.0) and it works for me.

[gabriellecozart]

@martinhanke It works! Don't know why it didn't the first time I looked at that post. Wow... Thanks for replying! I've been putting off that fix for a while haha

[themastersoda]

One way or another - workaround =/= fix, so i believe it should not be closed.

[gabriellecozart]

@themastersoda I think the documentation simply needs updating. If it was updated and had examples on their page then there wouldn’t be so much confusion about what to add to the html to make it work. They need to do some further investigation with people having this problem and making sure they’re using the current standards. Then once the documentation is updated they can close the issue.

[hectorggp]

I still have this issue after trying all the solutions planted here. Please help! Any suggestions?

[ionitron-bot[bot]]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.