ion-input maxlength does not work with actual device keyboards

[ghost]

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

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

Current behavior:
The maxlength attribute is not working on ion-input with types other than password.
This is only happening on actual devices. Browser and emulators are working just fine.

Expected behavior:
The user should not be able to type in any more characters when they reach the maxlength limit.

Steps to reproduce:
Cannot reproduce on a browser.

Related code:
A sample of the code.

<ion-input type="text" [(ngModel)]="newHomePhone" autocomplete="off" autocorrect="off"
                   autocapitalize="off" spellcheck="false" name="newHomePhone"
                   maxlength="10">
</ion-input>

Other information:
I have tried different input types (Email, text, ...) but only password works.
This is affecting both Android and iOS platforms.
I was getting the same issue even before cordova 7.0.0 update. So it should not be related to the new cordova.
An interesting observation was that when I was debugging the app and used my desktop keyboard (using chrome remote device for Android), the maxlength limit was being applied. But at the same time when I used the device keyboard, it was not working!

Ionic info:

Your system information:

Cordova CLI: 7.0.0 
Ionic Framework Version: 3.1.1
Ionic CLI Version: 2.2.1
Ionic App Lib Version: 2.2.0
Ionic App Scripts Version: 1.3.7
ios-deploy version: 1.9.1 
ios-sim version: 5.0.13 
OS: macOS Sierra
Node Version: v7.2.0
Xcode version: Xcode 8.3.2 Build version 8E2002

[jgw96]

Thanks for using Ionic! We will look into this.

[ghost]

@jgw96 Thanks. Any news on the fix? Is this gonna be fixed in the next release?

[uzumakinaruto123]

@manucorporat

Still not working and is reproducible with both ion-input and ion-textarea. Works on browser but not on device.

Ionic info:-
 
cli packages: (D:\sumeet\projects\xyz\node_modules)

    @ionic/cli-utils  : 1.8.1
    ionic (Ionic CLI) : 3.8.1

global packages:

    Cordova CLI : 6.5.0

local packages:

    @ionic/app-scripts : 2.1.3
    Cordova Platforms  : android 6.1.2
    Ionic Framework    : ionic-angular 3.6.0

System:

    Android SDK Tools : 25.3.1
    Node              : v7.1.0
    npm               : 3.10.9
    OS                : Windows 7

[paul33868]

Hi, I know it's an ugly hack, buy hopefully it's usefull for someone:

import { Directive, Input } from "@angular/core";

@directive({
selector: '[limit-to]',
host: {
'(blur)': '_onBlur($event)',
'(keyup)': '_onKeyup($event)',
'(focus)': '_onFocus($event)',
}
})
export class LimitToDirective {
@input('limit-to') limitTo;
_onBlur(e) {
const limit = +this.limitTo;
if (e.target.value.length > limit) {
e.target.value = e.target.value.substring(0, 15);
}
};
_onFocus(e) {
const limit = +this.limitTo;
if (e.target.value.length > limit) {
e.target.value = e.target.value.substring(0, 15);
}
};
_onKeyup(e) {
const limit = +this.limitTo;
if (e.target.value.length > limit) {
e.target.value = e.target.value.substring(0, 15);
}
};
}

[mannejkumar]

I have written custom directive to make it work in android devices.

import { Directive, EventEmitter, HostListener, Input, Output } from '@angular/core';
import { Platform } from "ionic-angular";

@Directive({
    selector: '[cMaxLength]'
})
export class MaxLengthDirective {

  @Input('cMaxLength') cMaxLength:any;
  @Output() ngModelChange:EventEmitter<any> = new EventEmitter();

  constructor(public platform: Platform) {
  }

  //keypress event doesn't work in ionic android. keydown event will work but the value doesn't effect until this event has finished. hence using keyup event. 
  @HostListener('keyup',['$event']) onKeyup(event) {
    const element = event.target as HTMLInputElement;
    const limit = this.cMaxLength;
    if (this.platform.is('android')) {
      const value = element.value.substr(0, limit);
      if (value.length <= limit) {
        element.value = value;
      } else {
        element.value = value.substr(0, limit-1);
      }
      this.ngModelChange.emit(element.value);
    }
  }

  @HostListener('focus',['$event']) onFocus(event) {
    const element = event.target as HTMLInputElement;
    if (!this.platform.is('android')) {
      element.setAttribute('maxlength', this.cMaxLength)
    }
  }
}```
Reference:
http://jagadeeshmanne.blogspot.in/2017/08/ionic-2-angular-maxlength-issue-in.html

[uzumakinaruto123]

The issue is not specific to Android but is to Android keyboards.

maxlength works on google keyboard.
maxlength does not work on Samsung keyboard.

Not yet tested with AOSP keyboard.

[mannejkumar]

Yes I also had issue on Samsung edge 7 device. I agree with you. I have fixed that issue and tested in multiple devices and it is working. Will edit my comment

[colabNetwork]

@mannejkumar your solution works fine but if i copy and paste any string more then the length it still accepts that string not really sure how to handle onchange on ion-input, if you have any suggestion that would help.

[mannejkumar]

Try adding 'input' event along with the 'keyup'
or 'paste' event. You need to add host listener for that particular event. Not sure about 'paste' event exists.

[ck88ger]

This solution with directives is to complex for such a simple problem.
I solved this without a directive. I bind ngmodel to the textarea and do a simple check "only in platfroms android" after every input if the string in this textarea is bigger than your charlimit. If so than slice the last character from the string. Thats all.

[mannejkumar]

@cagdas88 I agree with you if we have only one field. What if we have more than multiple fields and many across application

[ck88ger]

Make a global export function

[pnnrahul]

`<ion-item class="login-item">

<ion-icon name="call" item-start color="primary"></ion-icon>
<ion-label floating>Mobile Number</ion-label>
<ion-input formControlName="mobileNumber" type="tel" name="mobileNumber" maxlength="10" required></ion-input>
</ion-item>`

[ionitron-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.