Repository navigation
TextField does not scroll when selecting text #102484
Description
Steps to Reproduce
- Execute the code sample
- Enter a large text to the text field (e.g. copy-paste code sample to it)
- 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
Metadata
Metadata
Assignees
Labels
Important issues not at the top of the work listRunning on desktopEntering text in a text field or keyboard related problemsViewports, list views, slivers, etc.Found to occur in 2.10Found to occur in 2.13flutter/packages/flutter repository. See also f: labels.The issue has been confirmed reproducible and is ready to work onmaterial_ui package in flutter/packagesIssue is closed as already fixed in a newer version
Activity
maheshj01 commentedon Apr 25, 2022
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)
maheshj01 commentedon Apr 25, 2022
cc: @LongCatIsLooong
feimenggo commentedon Apr 26, 2022
Mobile has the same problem.
HansMuller commentedon Apr 26, 2022
CC @justinmc
justinmc commentedon May 2, 2022
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.
github-actions commentedon 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 -vand a minimal reproduction of the issue.