ion-input and ion-textarea have incomplete maxlength logic

[ryanhalley]

Ionic version: (check one with "x")
[ ] 1.x (For Ionic 1.x issues, please use https://github.com/ionic-team/ionic-v1)
[ ] 2.x
[x] 3.7.0

I'm submitting a ... (check one with "x")
[x] bug report
[ ] feature request
[ ] support request => Please do not submit support requests here, use one of these channels: https://forum.ionicframework.com/ or http://ionicworldwide.herokuapp.com/

Current behavior:

Set maxlength. Type into field, and see that maxlength is ignored. Leave field. Text is truncated to maxlength.

Expected behavior:
Set maxlength. Type into field and when you reach maxlength, every character after that is ignored.

Steps to reproduce:
Both debug via 'ionic cordova run android -cl', and Android (at least) release builds do not work as expected.

Related code:
Create a fresh ionic project using the 'blank' template. Change home.html as below:

<ion-header>
    <ion-navbar>
        <ion-title>MaxLength Tests</ion-title>
    </ion-navbar>
</ion-header>
<ion-content>
    <form> 
        <ion-list>
            <ion-item>
                <ion-label stacked>First Name</ion-label>
                <ion-input type="text" maxlength="5" ></ion-input>
            </ion-item>
            <ion-item>
                <ion-label stacked>Comment</ion-label>
                <ion-textarea maxlength="5" rows="4">
                </ion-textarea>
            </ion-item>
        </ion-list>
    </form>
</ion-content>

[kensodemann]

Hello, thank you for opening an issue with us! I attempted to duplicate your issue as described but this is working as expected in my environment.

Can you please provide the output of "ionic info" as well as letting me know on which browser(s) and environment(s) you are seeing this behavior?

[ryanhalley]

Hi, this is on Android in app browser, using 'ionic cordova run android -cl', and on Android release builds; equivalent testing for iOS is planned.

$ ionic info

cli packages: (D:\code\maxlengthtest\node_modules)

    @ionic/cli-plugin-cordova       : 1.6.2
    @ionic/cli-plugin-ionic-angular : 1.4.1
    @ionic/cli-utils                : 1.7.0
    ionic (Ionic CLI)               : 3.7.0

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:

    Node : v6.9.4
    OS   : Windows 10
    npm  : 5.3.0

[ryanhalley]

The device I'm using for testing is a Galaxy S6 Edge.

[kensodemann]

Hello! Thank you for responding with this information. This is a platform related issue. Generic HTML forms using <input type="text" maxlength="5" /> exhibit the same issue.

Until this is fixed in Android, you can work around the issue by using JavaScript to inspect the length of the text as it is entered if you wish.

[ryanhalley]

Thanks, understood.

…

On 14 August 2017 at 20:20, Ken Sodemann ***@***.***> wrote: Closed #12647 <#12647>. — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#12647 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/ANQoGRzSCLjcIUWxYZUyQCVskKg45kj_ks5sYJ3_gaJpZM4O0ylf> .

-- Best regards, Ryan Ryan Halley Zen Data Systems Ltd.

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