TextField does not scroll when selecting text

[feimenggo]

Steps to Reproduce

1. Execute the code sample
2. Enter a large text to the text field (e.g. copy-paste code sample to it)
3. Try to select the entire text

Expected results:
Area inside TextField should scroll when mouse rich to the edge

Actual results:
Area inside TextField is not scrolling

Code sample

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

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

class EditorPage extends StatefulWidget {
  const EditorPage({Key? key, required this.title}) : super(key: key);

  final String title;

  @override
  State<EditorPage> createState() => _EditorPageState();
}

class _EditorPageState extends State<EditorPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text(widget.title)),
      body: SingleChildScrollView(
        child: Column(
          children: const [
            TextField(
              style: TextStyle(fontSize: 24),
              decoration: InputDecoration(
                border: InputBorder.none,
                hintText: 'Please enter title',
                contentPadding: EdgeInsets.symmetric(horizontal: 16),
              ),
            ),
            TextField(
              maxLines: null,
              style: TextStyle(fontSize: 18, fontWeight: FontWeight.normal),
              decoration: InputDecoration(
                border: InputBorder.none,
                hintText: 'Please enter content',
                isCollapsed: true,
                contentPadding: EdgeInsets.symmetric(horizontal: 16),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

Logs

flutter doctor -v

[✓] Flutter (Channel beta, 2.13.0-0.2.pre, on macOS 12.3.1 21E258 darwin-arm, locale zh-Hans-CN)
    • Flutter version 2.13.0-0.2.pre at /Users/feimeng/develop/flutter/flutter-beta
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 8662e22bac (5 days ago), 2022-04-20 08:21:52 -0700
    • Engine revision 24a02fa5ee
    • Dart version 2.17.0 (build 2.17.0-266.5.beta)
    • DevTools version 2.12.2
    • Pub download mirror https://pub.flutter-io.cn
    • Flutter download mirror https://storage.flutter-io.cn

[✓] Android toolchain - develop for Android devices (Android SDK version 31.0.0)
    • Android SDK at /Users/feimeng/Library/Android/sdk
    • Platform android-31, build-tools 31.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.2.1)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • CocoaPods version 1.11.2

[✓] 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)

[✓] IntelliJ IDEA Ultimate Edition (version 2021.2.1)
    • IntelliJ at /Applications/IntelliJ IDEA.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.66.0)
    • 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)
    • macOS (desktop) • macos  • darwin-arm64   • macOS 12.3.1 21E258 darwin-arm
    • Chrome (web)    • chrome • web-javascript • Google Chrome 100.0.4896.88

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

• No issues found!

EditorDemo.mp4

[maheshj01]

Hi @feimenggo, Thanks for filing the issue. I am able to reproduce the issue on stable and the master channel. The scrolling is buggy on the stable channel, While on the master channel the textSelection is lost when the text goes out of the viewport.

Stable

Screen.Recording.2022-04-25.at.4.16.04.PM.mov

master

Screen.Recording.2022-04-25.at.4.19.06.PM.mov

This issue is mainly on the Desktop, On mobile platforms the scrolling however works fine.

This looks like a related PR #32344 probably intended for mobile devices.

flutter doctor -v (mac)

[✓] Flutter (Channel stable, 2.10.5, on macOS 12.3 21E230 darwin-arm, locale en-IN)
    • Flutter version 2.10.5 at /Users/mahesh/Documents/flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 5464c5bac7 (12 hours ago), 2022-04-18 09:55:37 -0700
    • Engine revision 57d3bac3dd
    • Dart version 2.16.2
    • DevTools version 2.9.2

[✓] Android toolchain - develop for Android devices (Android SDK version 31.0.0)
    • Android SDK at /Users/mahesh/Library/Android/sdk
    • Platform android-32, build-tools 31.0.0
    • ANDROID_HOME = /Users/mahesh/Library/Android/sdk
    • 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.2.1)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • CocoaPods version 1.10.2

[✓] 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)

[✓] IntelliJ IDEA Community Edition (version 2021.2.1)
    • IntelliJ at /Applications/IntelliJ IDEA CE.app
    • Flutter plugin version 61.2.4
    • Dart plugin version 212.5080.8

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

[✓] Connected device (4 available)
    • Redmi K20 Pro (mobile) • 192.168.1.2:55555                    • android-arm64  • Android 11 (API 30)
    • iPhone 12 Pro (mobile) • 535317A4-921C-488F-B234-C2CC6D4AE5A1 • ios            • com.apple.CoreSimulator.SimRuntime.iOS-14-5 (simulator)
    • macOS (desktop)        • macos                                • darwin-arm64   • macOS 12.3 21E230 darwin-arm
    • Chrome (web)           • chrome                               • web-javascript • Google Chrome 100.0.4896.88

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

• No issues found!

[✓] Flutter (Channel master, 2.13.0-0.0.pre.712, on macOS 12.3 21E230 darwin-arm, locale en-IN)
    • Flutter version 2.13.0-0.0.pre.712 at /Users/mahesh/Documents/flutter_master
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 8c22f5648a (77 minutes ago), 2022-04-25 05:34:07 -0400
    • Engine revision 10efa195bf
    • Dart version 2.18.0 (build 2.18.0-44.0.dev)
    • DevTools version 2.12.2

[✓] Android toolchain - develop for Android devices (Android SDK version 31.0.0)
    • Android SDK at /Users/mahesh/Library/Android/sdk
    • Platform android-32, build-tools 31.0.0
    • ANDROID_HOME = /Users/mahesh/Library/Android/sdk
    • 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.2.1)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    ! CocoaPods 1.10.2 out of date (1.11.0 is recommended).
        CocoaPods is used to retrieve the iOS and macOS platform side's plugin code that
        responds to your plugin usage on the Dart side.
        Without CocoaPods, plugins will not work on iOS or macOS.
        For more info, see https://flutter.dev/platform-plugins
      To upgrade see https://guides.cocoapods.org/using/getting-started.html#installation for
      instructions.

[✓] 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)

[✓] IntelliJ IDEA Community Edition (version 2021.2.1)
    • IntelliJ at /Applications/IntelliJ IDEA CE.app
    • Flutter plugin version 61.2.4
    • Dart plugin version 212.5080.8

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

[✓] Connected device (3 available)
    • Redmi K20 Pro (mobile) • 192.168.1.4:5533 • android-arm64  • Android 11 (API 30)
    • macOS (desktop)        • macos            • darwin-arm64   • macOS 12.3 21E230 darwin-arm
    • Chrome (web)           • chrome           • web-javascript • Google Chrome 100.0.4896.127

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

! Doctor found issues in 1 category.

[maheshj01]

cc: @LongCatIsLooong

[feimenggo]

cc: @LongCatIsLooong

Mobile has the same problem.

[HansMuller]

CC @justinmc