bug: maxlength attribute not working with text using device keypad

[sunaina-kapadne]

Prerequisites

• [X] I have read the Contributing Guidelines.
• [X] I agree to follow the Code of Conduct.
• [X] I have searched for existing issues that already report this problem, without success.

Ionic Framework Version

• [ ] v4.x
• [ ] v5.x
• [X] v6.x
• [ ] Nightly

Current Behavior

• When using maxlength attribute on Laptop/PC keyboard it works as per the expectations, but on the device keypad, the characters are exceeding maxlength attribute.
• Numbers are working as per the expectations with max length attribute even on device keypad, unlike text.
• Test Case: By default maxlength value is 5 characters
• Please find below recording for your reference.

https://user-images.githubusercontent.com/108390622/206966929-7256297f-fc94-42e6-96a0-2a686c77399d.mp4

Expected Behavior

maxlength attribute should work with Text characters as per the expectations on device keypad.

Steps to Reproduce

Android: Use ion-text area and generate the app using cordova click on the textarea field on the page to open device keypad Enter any text exceeding 5 characters from keypad and the value is being accepted exceeding the max length value.

Code Reproduction URL

https://github.com/sunaina1691/demoApp.git

Ionic Info

Ionic:

Ionic CLI : 6.20.4 (C:\Users\skapadne\AppData\Roaming\npm\node_modules\@ionic\cli) Ionic Framework : @ionic/angular 6.4.0 @angular-devkit/build-angular : 15.0.3 @angular-devkit/schematics : 15.0.3 @angular/cli : 15.0.3 @ionic/angular-toolkit : 6.1.0

Cordova:

Cordova CLI : 9.0.0 (cordova-lib@9.0.1) Cordova Platforms : android 9.0.0 Cordova Plugins : cordova-plugin-ionic-keyboard 2.2.0, cordova-plugin-ionic-webview 5.0.0, (and 3 other plugins)

Utility:

cordova-res : not installed globally native-run : 1.7.1

System:

Android SDK Tools : 26.1.1 (C:\Users\skapadne\AppData\Local\Android\Sdk) NodeJS : v19.2.0 (C:\Program Files\nodejs\node.exe) npm : 8.19.3 OS : Windows 10

Additional Information

No response

[liamdebeasi]

Thanks for the report. Did you make your repo public? I cannot access it.

Also, does this behavior reproduce with a regular <input type="text" />?

[sunaina-kapadne]

Apologies for the inconvenience, yes it was private. I have updated the visibility of the repository to the public.I will try to reproduce this behaviour for input type=text and update you on this at soonest.

On Monday, 12 December 2022 at 22:31:15 GMT+8, Liam DeBeasi ***@***.***> wrote:  

Thanks for the report. Did you make your repo public? I cannot access it.

Also, does this behavior reproduce with a regular ?

— Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you authored the thread.Message ID: @.***>

[liamdebeasi]

Thanks, I can access the repo now. It looks like this is a longstanding bug in Android Chrome, not Ionic: https://bugs.chromium.org/p/chromium/issues/detail?id=647704&q=maxlength&can=2

ion-textarea uses a <textarea> element internally so we are relying on the browser to provide the correct maxlength behavior.

[sunaina-kapadne]

Quick Update:

1. we tried testing in several ios devices as well and we observed the same behavior for only IPHONE 11 IOS 14.2.0 Rest of all devices didn't showed up same behavior.
2. Yes, this behavior can be reproduced with a regular

Any leads/workarounds will be highly appreciated. Thanks

[typefox09]

I've noticed that setting minlength="20" && maxlength="2000" (or any number) on the ion-textarea does nothing on web?

[perez247]

For me I used the substring function of the string on keyup

value.substring(0, 20) // if we want a maxlength of 20

Just ensure the value property is not null.