Skip to content

[General]: autoScrollWhenFocusOnInvalidnot working when using dynamic forms #1476

Open
@geronimol

Description

@geronimol

Is there an existing issue for this?

  • I have searched the existing issues

Package/Plugin version

10.0.0

Platforms

  • Android
  • iOS
  • Linux
  • MacOS
  • Web
  • Windows

Flutter doctor

Flutter doctor
[✓] Flutter (Channel stable, 3.29.0, on macOS 13.7.2 22H313 darwin-x64, locale es-419) [1,613ms]
    • Flutter version 3.29.0 on channel stable at /Users/gero/fvm/versions/3.29.0
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 35c388afb5 (3 weeks ago), 2025-02-10 12:48:41 -0800
    • Engine revision f73bfc4522
    • Dart version 3.7.0
    • DevTools version 2.42.2

[✓] Android toolchain - develop for Android devices (Android SDK version 34.0.0) [5.8s]
    • Android SDK at /Users/gero/Library/Android/sdk
    • Platform android-34, build-tools 34.0.0
    • Java binary at: /Applications/Android Studio.app/Contents/jbr/Contents/Home/bin/java
      This is the JDK bundled with the latest Android Studio installation on this machine.
      To manually set the JDK path, use: `flutter config --jdk-dir="path/to/jdk"`.
    • Java version OpenJDK Runtime Environment (build 21.0.3+-79915915-b509.11)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 15.2) [3.3s]
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Build 15C500b
    • CocoaPods version 1.16.2

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

[✓] Android Studio (version 2024.2) [42ms]
    • 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 21.0.3+-79915915-b509.11)

[✓] Android Studio (version 2024.2) [36ms]
    • Android Studio at /Volumes/Latest/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 21.0.3+-79915915-b509.11)

[✓] VS Code (version 1.96.4) [36ms]
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension can be installed from:
      🔨 https://marketplace.visualstudio.com/items?itemName=Dart-Code.flutter

[✓] Connected device (2 available) [9.2s]
    • macOS (desktop) • macos  • darwin-x64     • macOS 13.7.2 22H313 darwin-x64
    • Chrome (web)    • chrome • web-javascript • Google Chrome 133.0.6943.142

[✓] Network resources [638ms]
    • All expected network resources are available.

• No issues found!

Minimal code example

Code sample
class HomePage extends StatefulWidget {
  const HomePage({super.key});

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  final _formKey = GlobalKey<FormBuilderState>();
  bool showFormField = false;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Padding(
        padding: const EdgeInsets.all(20.0),
        child: SingleChildScrollView(
          child: FormBuilder(
            key: _formKey,
            child: Column(
              children: [
                if (showFormField) ...[TestFormFieldWidget(name: 'test')],

                const SizedBox(height: 1000),

                for (int i = 0; i < 3; i++) 
                  Padding(
                    padding: const EdgeInsets.all(50.0), 
                    child: TestFormFieldWidget(name: '$i'),
                  ),
              ],
            ),
          ),
        ),
      ),
      bottomSheet: Padding(
        padding: const EdgeInsets.all(20.0),
        child: Wrap(
          runSpacing: 12,
          spacing: 12,
          children: [
            ElevatedButton(
              onPressed: () {
                setState(() {
                  showFormField = true;
                });
              },
              child: Text('Show Field'),
            ),
            ElevatedButton(
              onPressed: () {
                _formKey.currentState?.saveAndValidate(autoScrollWhenFocusOnInvalid: true, focusOnInvalid: false);
              },
              child: Text('Save'),
            ),
          ],
        ),
      ),
    );
  }
}

class TestFormFieldWidget extends StatelessWidget {
  const TestFormFieldWidget({super.key, required this.name});

  final String name;

  @override
  Widget build(BuildContext context) {
    return FormBuilderTextField(name: name, textInputAction: TextInputAction.next, validator: (s) => 'Error');
  }
}

Current Behavior

autoScrollWhenFocusOnInvalid isn't scrolling to the first form field with errors inserted dynamically.

Expected Behavior

autoScrollWhenFocusOnInvalid should scroll to the first form field with errors inserted dynamically.

Steps To Reproduce

  1. Run the example.
  2. Click "Show Field" button, so a new form field will appear on the top.
  3. Click "Save" button.

Aditional information

2025-02-28.14-19-12.mov

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugSomething isn't working

    Type

    Projects

    Status

    Ready

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions