TextField maxLength property is not working correctly.

Sample app:

void main() => runApp(App());

class App extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: TextField(
            maxLength: 5,
            maxLengthEnforced: true
          )
        )
      )
    );
  }

}

When I enter only letters into the TextField, the length is not restricted and I can enter an unlimited amount of characters. When I enter only numbers into the TextField, it does not display more than 5 characters (as it should) although pressing backspace is bugged when typing more than 5 numbers. Example: If you type 12345678, the TextField will show 12345 but typing backspace will do nothing 3 times as if the TextField contains 12345678 but is only showing 12345.

flutter doctor -v:

[√] Flutter (Channel stable, 1.22.0, on Microsoft Windows [Version 10.0.19041.508], locale en-CA)
    • Flutter version 1.22.0 at C:\Flutter
    • Framework revision d408d302e2 (4 days ago), 2020-09-29 11:49:17 -0700
    • Engine revision 5babba6c4d
    • Dart version 2.10.0

[√] Android toolchain - develop for Android devices (Android SDK version 30.0.2) 
    • Android SDK at C:\Users\Matt\AppData\Local\Android\sdk
    • Platform android-30, build-tools 30.0.2
    • Java binary at: C:\Program Files\Android\Android Studio Canary\jre\bin\java
    • Java version OpenJDK Runtime Environment (build 1.8.0_202-release-1483-b01)
    • All Android licenses accepted.

[!] Android Studio (version 3.3)
    • Android Studio at C:\Program Files\Android\Android Studio
    X Flutter plugin not installed; this adds Flutter specific functionality.
    X Dart plugin not installed; this adds Dart specific functionality.
    • Java version OpenJDK Runtime Environment (build 1.8.0_152-release-1248-b01)

[!] Android Studio (version 3.5)
    • Android Studio at C:\Program Files\Android\Android Studio Canary
    X Flutter plugin not installed; this adds Flutter specific functionality.
    X Dart plugin not installed; this adds Dart specific functionality.
    • Java version OpenJDK Runtime Environment (build 1.8.0_202-release-1483-b01)

[!] IntelliJ IDEA Community Edition (version 2019.3)
    • IntelliJ at C:\Program Files\JetBrains\IntelliJ IDEA Community Edition 2019.3.2
    X Flutter plugin not installed; this adds Flutter specific functionality.
    X Dart plugin not installed; this adds Dart specific functionality.
    • For information about installing plugins, see
      https://flutter.dev/intellij-setup/#installing-the-plugins

[√] VS Code (version 1.49.3)
    • VS Code at C:\Users\Matt\AppData\Local\Programs\Microsoft VS Code
    • Flutter extension version 3.15.0

[√] Connected device (1 available)
    • ONEPLUS A6013 (mobile) • 9e76e20e • android-arm64 • Android 10 (API 29)

! Doctor found issues in 3 categories.

i would like to work on this.

Tested on latest stable and master and I do see that if maxLength is set to true and is enforced, entering the letters more than max length isn't restricted and we can keep type in.
also, if we enter numbers, it does restrict at the max length, but if we keep typing the number, the additional numbers won't show-up in the field, but will be treated to be deleted while pressing back or cancel button from keyboard.

67236_master.mp4.zip
67236.mp4.zip

flutter doctor -v

[✓] Flutter (Channel master, 1.23.0-8.0.pre.132, on Mac OS X 10.15.4 19E2269
    x86_64, locale en-IN)
    • Flutter version 1.23.0-8.0.pre.132 at
      /Users/dhs/documents/Fluttersdk/flutter
    • Framework revision 5e97eed895 (3 hours ago), 2020-10-05 00:42:50 -0700
    • Engine revision a8d7d97bef
    • Dart version 2.11.0 (build 2.11.0-185.0.dev)

 
[✓] Android toolchain - develop for Android devices (Android SDK version 30.0.0)
    • Android SDK at /Users/dhs/Library/Android/sdk
    • Platform android-30, build-tools 30.0.0
    • Java binary at: /Applications/Android
      Studio.app/Contents/jre/jdk/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build
      1.8.0_242-release-1644-b3-6222593)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 11.5)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Xcode 11.5, Build version 11E608c
    • CocoaPods version 1.9.3

[✓] Chrome - develop for the web
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[✓] Android Studio (version 4.0)
    • Android Studio at /Applications/Android Studio.app/Contents
    • Flutter plugin version 46.0.2
    • Dart plugin version 193.7361
    • Java version OpenJDK Runtime Environment (build
      1.8.0_242-release-1644-b3-6222593)

[✓] VS Code (version 1.49.1)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.11.0

[✓] Connected device (5 available)
    • SM A260G (mobile)                   • 5200763ebcfa861f
      • android-arm    • Android 8.1.0 (API 27)
    • iPhone SE (2nd generation) (mobile) • 312977A7-2DB1-4737-AEBB-35FA6522A309
      • ios            • com.apple.CoreSimulator.SimRuntime.iOS-13-5 (simulator)
    • macOS (desktop)                     • macos
      • darwin-x64     • Mac OS X 10.15.4 19E2269 x86_64
    • Web Server (web)                    • web-server
      • web-javascript • Flutter Tools
    • Chrome (web)                        • chrome
      • web-javascript • Google Chrome 85.0.4183.121

• No issues found!

#67391

#67236 any updates?

Make sure to verify that it's not only maxLength but any other input formatter. as in the bug I've opened #67513

This bug is introduced here: 2c3652b

If you don't care about the character counter you can use this TextInputFormatter as a temporary fix instead of the maxLength property:

import 'package:characters/characters.dart';
import 'package:flutter/services.dart';

/// TextInputFormatter that fixes the regression.
/// https://github.com/flutter/flutter/issues/67236
///
/// Remove it once the issue above is fixed.
class LengthLimitingTextFieldFormatterFixed
    extends LengthLimitingTextInputFormatter {
  LengthLimitingTextFieldFormatterFixed(int maxLength) : super(maxLength);

  @override
  TextEditingValue formatEditUpdate(
    TextEditingValue oldValue,
    TextEditingValue newValue,
  ) {
    if (maxLength != null &&
        maxLength > 0 &&
        newValue.text.characters.length > maxLength) {
      // If already at the maximum and tried to enter even more, keep the old
      // value.
      if (oldValue.text.characters.length == maxLength) {
        return oldValue;
      }
      // ignore: invalid_use_of_visible_for_testing_member
      return LengthLimitingTextInputFormatter.truncate(newValue, maxLength);
    }
    return newValue;
  }
}

@Albert221

@Albert221 are you positive it fixes the "Delete" behaviour?
I had a custom Text Input Formatter and it happened all the same.

@arielbh

@arielbh no, it does not fix that one.

Up for this one, I also experienced this, this is the Flutter doctor result:

[✓] Flutter (Channel stable, 1.22.0, on Mac OS X 10.15.7 19H2, locale en-ID)

[✓] Android toolchain - develop for Android devices (Android SDK version 29.0.3)
[!] Xcode - develop for iOS and macOS
    ✗ Xcode installation is incomplete; a full installation is necessary for iOS
      development.
      Download at: https://developer.apple.com/xcode/download/
      Or install Xcode via the App Store.
      Once installed, run:
        sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer
        sudo xcodebuild -runFirstLaunch
[✓] Android Studio (version 4.0)
[✓] VS Code (version 1.50.0)
[✓] Connected device (1 available)

! Doctor found issues in 1 category.

maxLength and inputFormaters did not work for me, I have some workaround for this.
I. added onChanged method to the TextField like this:
onChanged: (value) { String result = value; if (result.length > 4) { result = result.substring(0, 4); } _textFieldController.text = result; _textFieldController.selection = TextSelection.fromPosition(TextPosition(offset: result.length)); }

And you will not have endless calling of onChanged when you set _textFieldController.text = result; because as documentation of onChanged says, This callback doesn't run when the TextField's text is changed programmatically, via the TextField's controller.
All other ways were making endless calling of callbacks, I mean if you set controller.text from addListener method of controller, it will bring listener's endless loop call.

This is still not working correctly.

in both cases - using

inputFormatters: [ new LengthLimitingTextInputFormatter(20), ],

or using

maxLength: 20, maxLengthEnforced: true, buildCounter: (BuildContext context, { int currentLength, int maxLength, bool isFocused }) => null,

I can type in any amount of Text until the first " " (blank) leads to the behaviour or select...

I can type in:
OneTwoThreeFourFiveSixSevenEight

when I click on the text to select it or enter a whitespace the text is cutted to 20 characters:
OneTwoThreeFourFiveS

C:\SDKs\flutter\bin\flutter.bat doctor --verbose
[√] Flutter (Channel stable, 1.22.4, on Microsoft Windows [Version 10.0.19041.685], locale de-DE)
• Flutter version 1.22.4 at C:\SDKs\flutter
• Framework revision 1aafb3a (6 weeks ago), 2020-11-13 09:59:28 -0800
• Engine revision 2c956a31c0
• Dart version 2.10.4

[√] Android toolchain - develop for Android devices (Android SDK version 30.0.3)
• Android SDK at C:\Users\xxx\AppData\Local\Android\sdk
• Platform android-30, build-tools 30.0.3
• Java binary at: C:\SDKs\Java\jdk-15.0.1\bin\java
• Java version Java(TM) SE Runtime Environment (build 15.0.1+9-18)
• All Android licenses accepted.

[!] Android Studio (not installed)
• Android Studio not found; download from https://developer.android.com/studio/index.html
(or visit https://flutter.dev/docs/get-started/install/windows#android-setup for detailed instructions).

[√] Connected device (2 available)
• Android SDK built for x86 (mobile) • emulator-5554 • android-x86 • Android 10 (API 29) (emulator)
• sdk gphone x86 arm (mobile) • emulator-5556 • android-x86 • Android 11 (API 30) (emulator)

maxLength and inputFormaters did not work for me, I have some workaround for this.
I. added onChanged method to the TextField like this:
onChanged: (value) { String result = value; if (result.length > 4) { result = result.substring(0, 4); } _textFieldController.text = result; _textFieldController.selection = TextSelection.fromPosition(TextPosition(offset: result.length)); }

And you will not have endless calling of onChanged when you set _textFieldController.text = result; because as documentation of onChanged says, This callback doesn't run when the TextField's text is changed programmatically, via the TextField's controller.
All other ways were making endless calling of callbacks, I mean if you set controller.text from addListener method of controller, it will bring listener's endless loop call.

I don't know why above solution created some problem in my app. so i modified it and working now.

onChanged: (String value) {
          String result;
          result = value;
          if (result.length > 30) {
            result = result.substring(0, 30);
            nameController.text = result;
            nameController.selection =
                TextSelection.fromPosition(TextPosition(offset: result.length));
          }
        },

Hi, everyone,
The original issue was solved with the master channel by #67892.

Before you leave a comment, please confirm whether the latest master channel can be reproduced, otherwise, please file a new issue with how to reproduce the problem to report it.

Navigation Menu

Repository navigation

TextField maxLength property is not working correctly. #67236

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

TextField maxLength property is not working correctly. #67236

Description

Activity

ayaankhan98 commented on Oct 4, 2020

darshankawar commented on Oct 5, 2020

xclud commented on Oct 6, 2020

tippuvenky commented on Oct 7, 2020

arielbh commented on Oct 7, 2020

Albert221 commented on Oct 7, 2020

arielbh commented on Oct 7, 2020

Albert221 commented on Oct 7, 2020

blackmenthor commented on Oct 11, 2020

LevonVardanyan commented on Nov 27, 2020

chrisDK1977 commented on Dec 28, 2020

mahidul-islam commented on Jan 5, 2021

xu-baolin commented on Jan 5, 2021

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions