Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Adding maxLength changing UI and setting counterText to blank string has no effect #15

Open
maliavinash opened this issue Aug 5, 2022 · 3 comments
Labels
bug Something isn't working

Comments

@maliavinash
Copy link

maliavinash commented Aug 5, 2022

Environment

Package version:
form_builder_phone_field: ^1.1.0

Flutter doctor
[✓] Flutter (Channel stable, 3.0.5, on macOS 12.5 21G72 darwin-arm, locale en-IN)
    • Flutter version 3.0.5 at /Users/username/Desktop/Development/flutter/flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision f1875d570e (5 weeks ago), 2022-07-13 11:24:16 -0700
    • Engine revision e85ea0e79c
    • Dart version 2.17.6
    • DevTools version 2.12.2

[✓] Android toolchain - develop for Android devices (Android SDK version 32.0.0)
    • Android SDK at /Users/username/Library/Android/sdk
    • Platform android-32, build-tools 32.0.0
    • Java binary at: /Applications/Android Studio.app/Contents/jre/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 11.0.11+0-b60-7772763)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 13.4.1)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • CocoaPods version 1.11.3

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

[✓] Android Studio (version 2021.1)
    • Android Studio at /Applications/Android Studio.app/Contents
    • Flutter plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/6351-dart
    • Java version OpenJDK Runtime Environment (build 11.0.11+0-b60-7772763)

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

[✓] Connected device (3 available)
    • sdk gphone64 arm64 (mobile) • emulator-5554 • android-arm64  • Android 12 (API 32) (emulator)
    • macOS (desktop)             • macos         • darwin-arm64   • macOS 12.5 21G72 darwin-arm
    • Chrome (web)                • chrome        • web-javascript • Google Chrome 104.0.5112.79

[✓] HTTP Host Availability
    • All required HTTP hosts are available

• No issues found!

Code sample
Scaffold(
      appBar: AppBar(
        // Here we take the value from the MyHomePage object that was created by
        // the App.build method, and use it to set our appbar title.
        title: Text(widget.title),
      ),
      body: Container(
        padding: const EdgeInsets.only(top: 16, left: 16, right: 16),
        child: Container(
          padding: const EdgeInsets.all(1.0),
          child: FormBuilderPhoneField(
            autovalidateMode: AutovalidateMode.onUserInteraction,
            key: phoneNumberFieldKey,
            maxLength: 10, //Adding this
            name: 'phoneNumber',
            priorityListByIsoCode: const ['US'],
            titlePadding: EdgeInsets.zero,
            keyboardType: TextInputType.phone,
            focusNode: phoneNumberFocus,
            textInputAction: TextInputAction.next,
            iconSelector: const SizedBox(
              width: 0,
              height: 0,
            ),
            decoration: const InputDecoration(
              counterText: "", //This has no effect
              labelText: "Phone Number",
              contentPadding: EdgeInsets.symmetric(vertical: 7, horizontal: 16),
              fillColor: Colors.white,
              filled: true,
              enabledBorder: OutlineInputBorder(
                borderSide: BorderSide(color: Colors.black, width: 0.5),
                borderRadius: BorderRadius.all(Radius.circular(
                        8.0) //                 <--- border radius here
                    ),
              ),
              errorBorder: OutlineInputBorder(
                borderSide: BorderSide(color: Colors.red, width: 0.5),
                borderRadius: BorderRadius.all(Radius.circular(
                        8.0) //                 <--- border radius here
                    ),
              ),
              border: OutlineInputBorder(
                borderSide: BorderSide(color: Colors.black, width: 0.5),
                borderRadius: BorderRadius.all(Radius.circular(
                        8.0) //                 <--- border radius here
                    ),
              ),
              focusedErrorBorder: OutlineInputBorder(
                borderSide: BorderSide(color: Colors.red, width: 0.5),
                borderRadius: BorderRadius.all(Radius.circular(
                        8.0) //                 <--- border radius here
                    ),
              ),
              disabledBorder: OutlineInputBorder(
                borderSide: BorderSide(color: Colors.black, width: 0.5),
                borderRadius: BorderRadius.all(Radius.circular(
                        8.0) //                 <--- border radius here
                    ),
              ),
              focusedBorder: OutlineInputBorder(
                borderSide: BorderSide(color: Colors.black, width: 0.5),
                borderRadius: BorderRadius.all(Radius.circular(
                        8.0) //                 <--- border radius here
                    ),
              ),
              floatingLabelBehavior: FloatingLabelBehavior.auto,
            ),
            validator: FormBuilderValidators.compose([
              FormBuilderValidators.required(),
              //FormBuilderValidators.numeric(),
            ]),
          ),
        ),
      ),
    );

Description

Expected behavior:
It Should not change UI on adding maxLength property and it should hide counters when added counterText as blank string ("")

Current behavior:

  1. Adding maxLength property, it changes UI. I had borders set in InputDecoration.
  2. Adding counterText property to "" in InputDecoration does nothing

Steps to reproduce

  1. Added property maxLength
  2. Added property counterText as "" in InputDecoration

Images

Before adding maxLength=10 to both widget, 2nd widget is FormBuilderTextField from flutter_form_builder package

Screenshot_1660472611

After adding maxLength=10 to both widget

Screenshot_1660472629

After adding counterText = "" in InputDecoration

Screenshot_1660472650

Stacktrace/Logcat

@maliavinash maliavinash added the bug Something isn't working label Aug 5, 2022
@deandreamatias
Copy link
Contributor

Please fill the template to can helpol you
Thanks

@maliavinash
Copy link
Author

I have filled the template. I have created native widget from FormBuilderPhoneField code and added functionality to hide counter on adding counterText = ""

@deandreamatias
Copy link
Contributor

Thanks for details. When I will has time, I take a look on this

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

No branches or pull requests

2 participants