Skip to content

TextField does not scroll when selecting text #102484

Closed
#102992
Closed
TextField does not scroll when selecting text#102484
#102992
Assignees
justinmc
Labels
P2Important issues not at the top of the work lista: desktopRunning on desktopa: text inputEntering text in a text field or keyboard related problemsf: scrollingViewports, list views, slivers, etc.found in release: 2.10Found to occur in 2.10found in release: 2.13Found to occur in 2.13frameworkflutter/packages/flutter repository. See also f: labels.has reproducible stepsThe issue has been confirmed reproducible and is ready to work onp: material_uimaterial_ui package in flutter/packagesr: fixedIssue is closed as already fixed in a newer version

Description

@feimenggo
feimenggo
opened on Apr 25, 2022

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

Activity

  1. maheshj01
    added
    in triagePresently being triaged by the triage team
    on Apr 25, 2022

  2. maheshj01 commented on Apr 25, 2022

    @maheshj01
    maheshj01
    on Apr 25, 2022
    Member

    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.
  3. maheshj01
    added
    a: text inputEntering text in a text field or keyboard related problems
    frameworkflutter/packages/flutter repository. See also f: labels.
    p: material_uimaterial_ui package in flutter/packages
    f: scrollingViewports, list views, slivers, etc.
    has reproducible stepsThe issue has been confirmed reproducible and is ready to work on
    found in release: 2.10Found to occur in 2.10
    found in release: 2.13Found to occur in 2.13
    a: desktopRunning on desktop
    and removed
    in triagePresently being triaged by the triage team
    on Apr 25, 2022

  4. maheshj01 commented on Apr 25, 2022

    @maheshj01
    maheshj01
    on Apr 25, 2022
    Member

    cc: @LongCatIsLooong

  5. feimenggo commented on Apr 26, 2022

    @feimenggo
    feimenggo
    on Apr 26, 2022
    Author

    cc: @LongCatIsLooong

    Mobile has the same problem.

  6. HansMuller commented on Apr 26, 2022

    @HansMuller
    HansMuller
    on Apr 26, 2022
    Contributor

    CC @justinmc

  7. HansMuller
    assigned
    justinmc
    on Apr 28, 2022

  8. justinmc commented on May 2, 2022

    @justinmc
    justinmc
    on May 2, 2022
    Contributor

    The thing that causes this is that it's not the TextField that's scrolling, it's the SingleChildScrollView. You may be able to work around this by changing your widget tree so the TextField is a fixed height and fits on screen.

    The real problem is that the selection position should include that scrolling in its calculation. I'll take a look.

  9. gspencergoog
    added
    P2Important issues not at the top of the work list
    on May 5, 2022
  10. justinmc
    closed this as completedin #102992on Oct 5, 2022
  11. maheshj01
    added
    r: fixedIssue is closed as already fixed in a newer version
    on Oct 8, 2022

  12. github-actions commented on Oct 22, 2022

    @github-actions
    github-actionsbot
    on Oct 22, 2022

    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.

  13. github-actions
    locked as resolved and limited conversation to collaborators on Oct 22, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

Labels

P2Important issues not at the top of the work lista: desktopRunning on desktopa: text inputEntering text in a text field or keyboard related problemsf: scrollingViewports, list views, slivers, etc.found in release: 2.10Found to occur in 2.10found in release: 2.13Found to occur in 2.13frameworkflutter/packages/flutter repository. See also f: labels.has reproducible stepsThe issue has been confirmed reproducible and is ready to work onp: material_uimaterial_ui package in flutter/packagesr: fixedIssue is closed as already fixed in a newer version

Type

No type

Projects

No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions