flutter-form-builder-ecosystem / flutter-form-builder-ecosystem/flutter_form_builder

[General]: `autoScrollWhenFocusOnInvalid`not working when using dynamic forms

Open
#1,476 1 comment 0 reactions 0 assignees View on GitHub
bug
Dominant language
Dart
Stars
1.6k
Forks
561
PR merge metrics
No merged PRs in 30d

Description

### Is there an existing issue for this?

- [x] I have searched the existing issues

### Package/Plugin version

10.0.0

### Platforms

- [x] Android
- [x] iOS
- [x] Linux
- [x] MacOS
- [x] Web
- [x] Windows

### Flutter doctor

Flutter doctor

```bash
[✓] 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

```dart
class HomePage extends StatefulWidget {
const HomePage({super.key});

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

class _HomePageState extends State {
final _formKey = GlobalKey();
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

https://github.com/user-attachments/assets/db7e66e4-1b6a-4fb7-95e3-061a15caf478

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.