Scrollable parent does not scroll to TextFormField (on focus)when TextSelection is set

Steps to Reproduce

Wrap a TextFormField into a scrollable widget like SingleChildScrollView.
Into onTap callback select the whole text of the text controller.
Run the example scroll down and tap the textfield.

Expected results:
The TextFormField should be scroll up above the keyboard. Video shows the behavior when text selection is not set.

working.mov

Actual results:
The TextFormField is hidden behind.

not_working.mov

Code sample

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const TestSelectControllerWidget(),
    );
  }
}

class TestSelectControllerWidget extends StatefulWidget {
  const TestSelectControllerWidget({super.key});

  @override
  State<StatefulWidget> createState() => _TestSelectControllerState();
}

class _TestSelectControllerState extends State<TestSelectControllerWidget> {
  final TextEditingController _controller = TextEditingController();

  @override
  void initState() {
    super.initState();

    _controller.text = 'Select all!';
  }

  @override
  void dispose() {
    _controller.dispose();

    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Select test'),
      ),
      body: SingleChildScrollView(
        child: Column(
          children: [
            SizedBox(
              height: MediaQuery.of(context).size.height,
              child: const Text('Moved field to bottom'),
            ),
            TextFormField(
              controller: _controller,
              onTap: () {
                //when removed the scroll behavior is correct!
                _controller.selection = TextSelection(
                    baseOffset: 0, extentOffset: _controller.text.length);
              },
            )
          ],
        ),
      ),
    );
  }
}

Logs

No issues found! (ran in 1.8s)

[!] Flutter (Channel stable, 3.7.0, on macOS 12.5.1 21G83 darwin-x64, locale de-DE)
    • Flutter version 3.7.0 on channel stable at xxx
    ! Warning: `dart` on your path resolves to /usr/local/Cellar/dart/2.12.4/libexec/bin/dart, which is not inside your current Flutter SDK checkout at xxx/flutter_sdk/flutter. Consider adding xxx/flutter_sdk/flutter/bin to the front of your path.
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision b06b8b2710 (8 days ago), 2023-01-23 16:55:55 -0800
    • Engine revision b24591ed32
    • Dart version 2.19.0
    • DevTools version 2.20.1
    • If those were intentional, you can disregard the above warnings; however it is recommended to use "git" directly to perform update checks and upgrades.

[!] Android toolchain - develop for Android devices (Android SDK version 31.0.0)
    • Android SDK at xxx/android_sdk
    ✗ cmdline-tools component is missing
      Run `path/to/sdkmanager --install "cmdline-tools;latest"`
      See https://developer.android.com/studio/command-line for more details.
    ✗ Android license status unknown.
      Run `flutter doctor --android-licenses` to accept the SDK licenses.
      See https://flutter.dev/docs/get-started/install/macos#android-setup for more details.

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

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

[✓] Android Studio (version 4.2)
    • 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.8+10-b944.6916264)

[!] Android Studio (version 2022.1)
    • Android Studio at /Users/xxx/Library/Application Support/JetBrains/Toolbox/apps/AndroidStudio/ch-0/221.6008.13.2211.9477386/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
    ✗ Unable to find bundled Java version.
    • Try updating or re-installing Android Studio.

[!] Android Studio (version 2022.1)
    • Android Studio at /Users/xxx/Library/Application Support/JetBrains/Toolbox/apps/AndroidStudio/ch-0/221.6008.13.2211.9301383/Android Studio Preview.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
    ✗ Unable to find bundled Java version.
    • Try updating or re-installing Android Studio.

[!] Android Studio
    • Android Studio at /Users/xxx/Downloads/Android Studio Preview.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
    ✗ Unable to find bundled Java version.
    • Try updating or re-installing Android Studio.

[✓] IntelliJ IDEA Community Edition (version 2020.2.2)
    • IntelliJ at /Users/xxx/Library/Application Support/JetBrains/Toolbox/apps/IDEA-C/ch-0/202.7319.50/IntelliJ IDEA CE.app
    • 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

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

[✓] Connected device (3 available)
    • SM X200 (mobile) • R9YT307A0QK • android-arm64  • Android 13 (API 33)
    • mcOS (desktop)  • macos       • darwin-x64     • macOS 12.5.1 21G83 darwin-x64
    • Chrome (web)     • chrome      • web-javascript • Google Chrome 109.0.5414.119

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

! Doctor found issues in 5 categories.

@bobekos

Thanks for the report @bobekos
I do see the same behavior upon running your code sample on mobile and it doesn't seem to be specific to SingleChildScrollView, but also persists with ListView as well. But when it comes to TextSelection as you have implemented, using collapsed or fromPosition seems to work as expected, ie, the textfield moves / scrolls up above the keyboard as shown below:

119628_2.mov

_controller.selection = TextSelection.collapsed(
                      affinity: TextAffinity.downstream, offset: 0);

or

 _controller.selection = TextSelection.fromPosition(
                    TextPosition(offset: _controller.text.length));

I think the only difference is above doesn't select the entire text upon receiving the focus. See if this serves your purpose or not.

I tried this using latest master version. Channel master, 3.8.0-1.0.pre.2

@darshankawar

Hi @darshankawar thanks for the response.

Yeah it doesn't matter which scrollable widget is the parent (customscrollview, listview etc.).

Ok but the selection that you have provided are not selecting the text it just moved the cursor to corresponding offset. How to accomplish the whole text selection and also the scroll up behavior?

I found out that with a small delay the selection is working. But cmon this can't be the solution ^^.

TextFormField(
  controller: _controller,
  onTap: () async {
    //workaround to make text selection working
    await Future.delayed(const Duration(milliseconds: 500));

    _controller.selection = TextSelection(
        baseOffset: 0, extentOffset: _controller.text.length);
  },
)

Preview:

Bildschirmaufnahme.2023-02-01.um.15.04.10.mov

Thanks for the update. Can you check this similar issue and see if it resembles your case too ?

@darshankawar

@darshankawar
No the issue is about not correctly requesting the focus to the given textfield when validation occurred (it has something to do with the scroll issue but in my example the textfield is not losing focus it just not scroll up). I have also tested the textfield with a custom focusnode to check if we can select the text after the textfield got focus. But unfortunately the bug still exists (same behavior like when the select logic is in ontap method):

class _TestSelectControllerState extends State<TestSelectControllerWidget> {
  final TextEditingController _controller = TextEditingController();
  final FocusNode _focusNode = FocusNode();

  @override
  void initState() {
    super.initState();

    _controller.text = 'Select all!';

    _focusNode.addListener(() {
      if (_focusNode.hasFocus) {
        _controller.selection = TextSelection(
          baseOffset: 0,
          extentOffset: _controller.text.length,
        );
      }
    });
  }

  @override
  void dispose() {
    _controller.dispose();
    _focusNode.dispose();

    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Select test'),
      ),
      body: SingleChildScrollView(
        child: Column(
          children: [
            SizedBox(
              height: MediaQuery.of(context).size.height,
              child: const Text('Moved field to bottom'),
            ),
            TextFormField(
              focusNode: _focusNode,
              controller: _controller,
              onTap: () async {
                //use focus node to select
                // _controller.selection = TextSelection(
                //     baseOffset: 0, extentOffset: _controller.text.length);
              },
            )
          ],
        ),
      ),
    );
  }
}

Also it works here when we wait after the scroll to select the text:

_focusNode.addListener(() {
      if (_focusNode.hasFocus) {
      //this is working but ugly
        Future.delayed(const Duration(milliseconds: 500)).then((value) {
          _controller.selection = TextSelection(
            baseOffset: 0,
            extentOffset: _controller.text.length,
          );
        });
      }
    });

It seems that the text selection is cancelling the logic for the scroll behavior.

Thanks for the update. Based on my earlier verification, the original behavior is replicable when we set text selection as below:

TextSelection(
                    baseOffset: 0, extentOffset: _controller.text.length)

With workarounds / solution mentioned here, the textfield does scroll above the keyboard, but the text is not highlighted in those cases.

stable, master flutter doctor -v

[!] Flutter (Channel stable, 3.7.0, on macOS 12.2.1 21D62 darwin-x64, locale
    en-GB)
    • Flutter version 3.7.0 on channel stable at
      /Users/dhs/documents/fluttersdk/flutter
    ! Warning: `flutter` on your path resolves to
      /Users/dhs/Documents/Fluttersdk/flutter/bin/flutter, which is not inside
      your current Flutter SDK checkout at
      /Users/dhs/documents/fluttersdk/flutter. Consider adding
      /Users/dhs/documents/fluttersdk/flutter/bin to the front of your path.
    ! Warning: `dart` on your path resolves to
      /Users/dhs/Documents/Fluttersdk/flutter/bin/dart, which is not inside your
      current Flutter SDK checkout at /Users/dhs/documents/fluttersdk/flutter.
      Consider adding /Users/dhs/documents/fluttersdk/flutter/bin to the front
      of your path.
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision b06b8b2710 (28 hours ago), 2023-01-23 16:55:55 -0800
    • Engine revision b24591ed32
    • Dart version 2.19.0
    • DevTools version 2.20.1
    • If those were intentional, you can disregard the above warnings; however
      it is recommended to use "git" directly to perform update checks and
      upgrades.

[!] Xcode - develop for iOS and macOS (Xcode 12.3)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    ! Flutter recommends a minimum Xcode version of 13.
      Download the latest version or update via the Mac App Store.
    • CocoaPods version 1.11.2

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

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

[✓] Connected device (5 available)
    • SM G975F (mobile)       • RZ8M802WY0X • android-arm64   • Android 11 (API 30)
    • Darshan's iphone (mobile)  • 21150b119064aecc249dfcfe05e259197461ce23 •
      ios            • iOS 14.4.1 18D61
    • iPhone 12 Pro Max (mobile) • A5473606-0213-4FD8-BA16-553433949729     •
      ios            • com.apple.CoreSimulator.SimRuntime.iOS-14-3 (simulator)
    • macOS (desktop)            • macos                                    •
      darwin-x64     • Mac OS X 10.15.4 19E2269 darwin-x64
    • Chrome (web)               • chrome                                   •
      web-javascript • Google Chrome 98.0.4758.80

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

! Doctor found issues in 1 category.

[!] Flutter (Channel master, 3.8.0-1.0.pre.32, on macOS 12.2.1 21D62 darwin-x64,
    locale en-GB)
    • Flutter version 3.8.0-1.0.pre.32 on channel master at
      /Users/dhs/documents/fluttersdk/flutter
    ! Warning: `flutter` on your path resolves to
      /Users/dhs/Documents/Fluttersdk/flutter/bin/flutter, which is not inside
      your current Flutter SDK checkout at
      /Users/dhs/documents/fluttersdk/flutter. Consider adding
      /Users/dhs/documents/fluttersdk/flutter/bin to the front of your path.
    ! Warning: `dart` on your path resolves to
      /Users/dhs/Documents/Fluttersdk/flutter/bin/dart, which is not inside your
      current Flutter SDK checkout at /Users/dhs/documents/fluttersdk/flutter.
      Consider adding /Users/dhs/documents/fluttersdk/flutter/bin to the front
      of your path.
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision f9daa9aac4 (53 minutes ago), 2023-02-01 22:59:24 -0500
    • Engine revision 679c4b42e2
    • Dart version 3.0.0 (build 3.0.0-192.0.dev)
    • DevTools version 2.21.1
    • If those were intentional, you can disregard the above warnings; however
      it is recommended to use "git" directly to perform update checks and
      upgrades.

[!] Xcode - develop for iOS and macOS (Xcode 12.3)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    ! Flutter recommends a minimum Xcode version of 13.
      Download the latest version or update via the Mac App Store.
    • CocoaPods version 1.11.2

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

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

[✓] Connected device (5 available)
    • SM G975F (mobile)       • RZ8M802WY0X • android-arm64   • Android 11 (API 30)
    • Darshan's iphone (mobile)  • 21150b119064aecc249dfcfe05e259197461ce23 •
      ios            • iOS 14.4.1 18D61
    • iPhone 12 Pro Max (mobile) • A5473606-0213-4FD8-BA16-553433949729     •
      ios            • com.apple.CoreSimulator.SimRuntime.iOS-14-3 (simulator)
    • macOS (desktop)            • macos                                    •
      darwin-x64     • Mac OS X 10.15.4 19E2269 darwin-x64
    • Chrome (web)               • chrome                                   •
      web-javascript • Google Chrome 98.0.4758.80

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

! Doctor found issues in 1 category.

@LongCatIsLooong

CC @LongCatIsLooong from text input triage

This thread has been automatically locked since there has not been any recent activity after it was closed. If you are still experiencing a similar issue, please open a new bug, including the output of flutter doctor -v and a minimal reproduction of the issue.

Navigation Menu

Repository navigation

Scrollable parent does not scroll to TextFormField (on focus)when TextSelection is set #119628

Steps to Reproduce

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Scrollable parent does not scroll to TextFormField (on focus)when TextSelection is set #119628

Description

Steps to Reproduce

Activity

darshankawar commented on Feb 1, 2023

bobekos commented on Feb 1, 2023

darshankawar commented on Feb 2, 2023

bobekos commented on Feb 2, 2023

darshankawar commented on Feb 2, 2023

justinmc commented on Feb 2, 2023

github-actions commented on Mar 3, 2023

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions