Invalid TextField scroll offset change on paste from toolbar #96658

tgucio · 2022-01-14T13:09:45Z

Steps to Reproduce

Execute flutter run on the code sample
Copy the text from the first line and paste it at the end of the second line using toolbar

Expected results: TextField doesn't scroll as caret is already visible

Actual results: TextField scrolls

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 MyHomePage(title: 'bringIntoView test'),
    );
  }
}

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

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text(widget.title)),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            const Text('Copy & paste stuff below:'),
            Expanded(
              child: TextField(
                focusNode: FocusNode(),
                controller: TextEditingController(
                  text: 'Copy this whoooooollleeeeee line\nPaste it here using toolbar: \n' + ('.\n' * 50),
                ),
                maxLines: null,
                style: const TextStyle(fontSize: 36.0, color: Colors.black),
                cursorColor: Colors.grey,
              ),
            )
          ],
        ),
      ),
    );
  }
}

Logs

 % flutter doctor -v
[✓] Flutter (Channel master, 2.9.0-1.0.pre.363, on macOS 12.1 21C52 darwin-x64, locale en-GB)
    • Flutter version 2.9.0-1.0.pre.363 at /Library/Frameworks/flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 9e9a728667 (11 hours ago), 2022-01-14 09:40:11 +0800
    • Engine revision f121c1fe68
    • Dart version 2.17.0 (build 2.17.0-11.0.dev)
    • DevTools version 2.9.2

[✓] Android toolchain - develop for Android devices (Android SDK version 30.0.3)
    • Android SDK at /Users/jsmith/Library/Android/sdk
    • Platform android-31, build-tools 30.0.3
    • Java binary at: /Applications/Android Studio.app/Contents/jre/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 11.0.10+0-b96-7281165)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 13.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 2020.3)
    • 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.10+0-b96-7281165)

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

[✓] Connected device (2 available)
    • macOS (desktop) • macos  • darwin-x64     • macOS 12.1 21C52 darwin-x64
    • Chrome (web)    • chrome • web-javascript • Google Chrome 97.0.4692.71

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

• No issues found!

The text was updated successfully, but these errors were encountered:

tgucio · 2022-01-14T13:17:21Z

A bit down the debug road:

when pasting using the toolbar, bringIntoView() is called in editable_text.dart:

  Future<void> pasteText(SelectionChangedCause cause) async {
  (...)
    if (cause == SelectionChangedCause.toolbar) {
      bringIntoView(textEditingValue.selection.extent);

bringIntoView() calculates the offset to reveal caret from the previously rendered frame (before the paste)
however, at this point selection has already changed so _getOffsetToRevealCaret will point to where the caret would have been at this text offset before the paste

Possible solution would be to put the entire bringIntoView() code in SchedulerBinding.instance!.addPostFrameCallback((_) {}.

danagbemava-nc · 2022-01-14T14:24:22Z

Hi @tgucio, thanks for reporting this.

What platforms are you experiencing this behaviour on?

tgucio · 2022-01-14T15:20:57Z

Hi @danagbemava-nc,
This should be reproducible on any platform although the exact visual effect will depend on the screen / window size. Last tried on macOS.

danagbemava-nc · 2022-01-17T07:54:47Z

Issue is reproducible on master and beta.

Tested on the following platforms:

Android
iOS
MacOS
Web

Web doesn't seem to have this issue on either master or beta, although, it does appear to have a different issue on its own, which made it difficult to capture a recording for it on master. I will investigate and file a new issue for that if I'm able to come up with concrete repro steps.

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 MyHomePage(title: 'bringIntoView test'),
    );
  }
}

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

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text(widget.title)),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            const Text('Copy & paste stuff below:'),
            Expanded(
              child: TextField(
                focusNode: FocusNode(),
                controller: TextEditingController(
                  text: 'Copy this whoooooollleeeeee line\nPaste it here using toolbar: \n' + ('.\n' * 50),
                ),
                maxLines: null,
                style: const TextStyle(fontSize: 36.0, color: Colors.black),
                cursorColor: Colors.grey,
              ),
            )
          ],
        ),
      ),
    );
  }
}

videos

stable 2.8.1

macOS	android	web	ios
Screen.Recording.2022-01-17.at.06.53.48.mov	Screen.Recording.2022-01-17.at.06.55.15.mov	Screen.Recording.2022-01-17.at.06.57.51.mov	Simulator.Screen.Recording.-.iPhone.13.-.2022-01-17.at.07.02.10.mp4

beta and master

macOS	android	web	ios
Screen.Recording.2022-01-17.at.07.14.30.mov	Screen.Recording.2022-01-17.at.07.11.32.mov	Screen.Recording.2022-01-17.at.07.17.39.mov	Simulator.Screen.Recording.-.iPhone.13.-.2022-01-17.at.07.05.46.mp4

flutter doctor -v

[✓] Flutter (Channel stable, 2.8.1, on macOS 11.6 20G165 darwin-arm, locale en-GB)
    • Flutter version 2.8.1 at /Users/nexus/dev/sdks/flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 77d935af4d (5 weeks ago), 2021-12-16 08:37:33 -0800
    • Engine revision 890a5fca2e
    • Dart version 2.15.1

[✓] Android toolchain - develop for Android devices (Android SDK version 31.0.0)
    • Android SDK at /Users/nexus/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.10+0-b96-7249189)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 13.0)
    • 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 2020.3)
    • 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.10+0-b96-7249189)

[☠] IntelliJ IDEA Community Edition (the doctor check crashed)
    ✗ Due to an error, the doctor check did not complete. If the error message below is not helpful, please let us know about this issue at https://github.com/flutter/flutter/issues.
    ✗ FormatException: Unexpected extension byte (at offset 5)
    • #0      _Utf8Decoder.convertSingle (dart:convert-patch/convert_patch.dart:1789:7)
      #1      Utf8Decoder.convert (dart:convert/utf.dart:318:42)
      #2      InputStream.readString (package:archive/src/util/input_stream.dart:207:30)
      #3      new ZipDirectory.read (package:archive/src/zip/zip_directory.dart:40:30)
      #4      ZipDecoder.decodeBuffer (package:archive/src/zip_decoder.dart:19:30)
      #5      ZipDecoder.decodeBytes (package:archive/src/zip_decoder.dart:14:12)
      #6      IntelliJPlugins._findPluginXml (package:flutter_tools/src/intellij/intellij.dart:130:44)
      #7      IntelliJPlugins._readPackageVersion (package:flutter_tools/src/intellij/intellij.dart:141:40)
      #8      IntelliJPlugins.validatePackage (package:flutter_tools/src/intellij/intellij.dart:63:35)
      #9      IntelliJValidator.validate (package:flutter_tools/src/intellij/intellij_validator.dart:103:15)
      #10     asyncGuard.<anonymous closure> (package:flutter_tools/src/base/async_guard.dart:111:32)
      #11     asyncGuard.<anonymous closure> (package:flutter_tools/src/base/async_guard.dart:109:18)
      #12     _rootRun (dart:async/zone.dart:1428:13)
      #13     _CustomZone.run (dart:async/zone.dart:1328:19)
      #14     _runZoned (dart:async/zone.dart:1863:10)
      #15     runZonedGuarded (dart:async/zone.dart:1851:12)
      #16     runZoned (dart:async/zone.dart:1782:12)
      #17     asyncGuard (package:flutter_tools/src/base/async_guard.dart:109:3)
      #18     Doctor.startValidatorTasks (package:flutter_tools/src/doctor.dart:197:9)
      #19     Doctor.diagnose (package:flutter_tools/src/doctor.dart:301:47)
      #20     DoctorCommand.runCommand (package:flutter_tools/src/commands/doctor.dart:53:47)
      #21     FlutterCommand.verifyThenRunCommand (package:flutter_tools/src/runner/flutter_command.dart:1290:12)
      <asynchronous suspension>
      #22     FlutterCommand.run.<anonymous closure> (package:flutter_tools/src/runner/flutter_command.dart:1140:27)
      <asynchronous suspension>
      #23     AppContext.run.<anonymous closure> (package:flutter_tools/src/base/context.dart:150:19)
      <asynchronous suspension>
      #24     CommandRunner.runCommand (package:args/command_runner.dart:209:13)
      <asynchronous suspension>
      #25     FlutterCommandRunner.runCommand.<anonymous closure> (package:flutter_tools/src/runner/flutter_command_runner.dart:288:9)
      <asynchronous suspension>
      #26     AppContext.run.<anonymous closure> (package:flutter_tools/src/base/context.dart:150:19)
      <asynchronous suspension>
      #27     FlutterCommandRunner.runCommand (package:flutter_tools/src/runner/flutter_command_runner.dart:236:5)
      <asynchronous suspension>
      #28     run.<anonymous closure>.<anonymous closure> (package:flutter_tools/runner.dart:62:9)
      <asynchronous suspension>
      #29     AppContext.run.<anonymous closure> (package:flutter_tools/src/base/context.dart:150:19)
      <asynchronous suspension>
      #30     main (package:flutter_tools/executable.dart:94:3)
      <asynchronous suspension>


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

[✓] Connected device (2 available)
    • macOS (desktop) • macos  • darwin-arm64   • macOS 11.6 20G165 darwin-arm
    • Chrome (web)    • chrome • web-javascript • Google Chrome 97.0.4692.71

! Doctor found issues in 1 category.

[✓] Flutter (Channel master, 2.9.0-1.0.pre.384, on macOS 11.6 20G165 darwin-arm, locale en-GB)
    • Flutter version 2.9.0-1.0.pre.384 at /Users/nexus/dev/sdks/flutters
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision a3fd36a115 (2 days ago), 2022-01-14 20:40:17 -0500
    • Engine revision 83d99a5809
    • Dart version 2.17.0 (build 2.17.0-16.0.dev)
    • DevTools version 2.9.2

[✓] Android toolchain - develop for Android devices (Android SDK version 31.0.0)
    • Android SDK at /Users/nexus/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.10+0-b96-7249189)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 13.0)
    • 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 2020.3)
    • 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.10+0-b96-7249189)

[✓] IntelliJ IDEA Community Edition (version 2021.3)
    • IntelliJ at /Applications/IntelliJ IDEA CE.app
    • Flutter plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin version 213.5744.122

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

[✓] Connected device (2 available)
    • macOS (desktop) • macos  • darwin-arm64   • macOS 11.6 20G165 darwin-arm
    • Chrome (web)    • chrome • web-javascript • Google Chrome 97.0.4692.71

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

• No issues found!

[✓] Flutter (Channel beta, 2.10.0-0.1.pre, on macOS 11.6 20G165 darwin-arm, locale en-GB)
    • Flutter version 2.10.0-0.1.pre at /Users/nexus/dev/sdks/flutter_beta
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 628f0e3f3a (5 days ago), 2022-01-11 19:50:05 -0600
    • Engine revision 63ca99584a
    • Dart version 2.16.0 (build 2.16.0-134.1.beta)
    • DevTools version 2.9.2

[✓] Android toolchain - develop for Android devices (Android SDK version 31.0.0)
    • Android SDK at /Users/nexus/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.10+0-b96-7249189)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 13.0)
    • 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 2020.3)
    • 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.10+0-b96-7249189)

[☠] IntelliJ IDEA Community Edition (the doctor check crashed)
    ✗ Due to an error, the doctor check did not complete. If the error message below is not helpful, please let us know about this issue at https://github.com/flutter/flutter/issues.
    ✗ FormatException: Unexpected extension byte (at offset 5)
    • #0      _Utf8Decoder.convertSingle (dart:convert-patch/convert_patch.dart:1789:7)
      #1      Utf8Decoder.convert (dart:convert/utf.dart:351:42)
      #2      InputStream.readString (package:archive/src/util/input_stream.dart:207:30)
      #3      new ZipDirectory.read (package:archive/src/zip/zip_directory.dart:40:30)
      #4      ZipDecoder.decodeBuffer (package:archive/src/zip_decoder.dart:19:30)
      #5      ZipDecoder.decodeBytes (package:archive/src/zip_decoder.dart:14:12)
      #6      IntelliJPlugins._findPluginXml (package:flutter_tools/src/intellij/intellij.dart:130:44)
      #7      IntelliJPlugins._readPackageVersion (package:flutter_tools/src/intellij/intellij.dart:141:40)
      #8      IntelliJPlugins.validatePackage (package:flutter_tools/src/intellij/intellij.dart:63:35)
      #9      IntelliJValidator.validate (package:flutter_tools/src/intellij/intellij_validator.dart:103:15)
      #10     asyncGuard.<anonymous closure> (package:flutter_tools/src/base/async_guard.dart:111:32)
      #11     asyncGuard.<anonymous closure> (package:flutter_tools/src/base/async_guard.dart:109:18)
      #12     _rootRun (dart:async/zone.dart:1426:13)
      #13     _CustomZone.run (dart:async/zone.dart:1328:19)
      #14     _runZoned (dart:async/zone.dart:1861:10)
      #15     runZonedGuarded (dart:async/zone.dart:1849:12)
      #16     runZoned (dart:async/zone.dart:1780:12)
      #17     asyncGuard (package:flutter_tools/src/base/async_guard.dart:109:3)
      #18     Doctor.startValidatorTasks (package:flutter_tools/src/doctor.dart:205:9)
      #19     Doctor.diagnose (package:flutter_tools/src/doctor.dart:309:47)
      #20     DoctorCommand.runCommand (package:flutter_tools/src/commands/doctor.dart:50:48)
      #21     FlutterCommand.verifyThenRunCommand (package:flutter_tools/src/runner/flutter_command.dart:1320:12)
      <asynchronous suspension>
      #22     FlutterCommand.run.<anonymous closure> (package:flutter_tools/src/runner/flutter_command.dart:1161:27)
      <asynchronous suspension>
      #23     AppContext.run.<anonymous closure> (package:flutter_tools/src/base/context.dart:150:19)
      <asynchronous suspension>
      #24     CommandRunner.runCommand (package:args/command_runner.dart:209:13)
      <asynchronous suspension>
      #25     FlutterCommandRunner.runCommand.<anonymous closure> (package:flutter_tools/src/runner/flutter_command_runner.dart:281:9)
      <asynchronous suspension>
      #26     AppContext.run.<anonymous closure> (package:flutter_tools/src/base/context.dart:150:19)
      <asynchronous suspension>
      #27     FlutterCommandRunner.runCommand (package:flutter_tools/src/runner/flutter_command_runner.dart:229:5)
      <asynchronous suspension>
      #28     run.<anonymous closure>.<anonymous closure> (package:flutter_tools/runner.dart:62:9)
      <asynchronous suspension>
      #29     AppContext.run.<anonymous closure> (package:flutter_tools/src/base/context.dart:150:19)
      <asynchronous suspension>
      #30     main (package:flutter_tools/executable.dart:94:3)
      <asynchronous suspension>


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

[✓] Connected device (2 available)
    • macOS (desktop) • macos  • darwin-arm64   • macOS 11.6 20G165 darwin-arm
    • Chrome (web)    • chrome • web-javascript • Google Chrome 97.0.4692.71

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

! Doctor found issues in 1 category.

HansMuller · 2022-01-18T19:15:18Z

CC @justinmc

github-actions · 2022-03-10T01:27:43Z

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.

danagbemava-nc added the in triage Presently being triaged by the triage team label Jan 14, 2022

danagbemava-nc added the waiting for customer response The Flutter team cannot make further progress on this issue until the original reporter responds label Jan 14, 2022

github-actions bot removed the waiting for customer response The Flutter team cannot make further progress on this issue until the original reporter responds label Jan 14, 2022

tgucio mentioned this issue Feb 16, 2022

Call bringIntoView after RenderEditable updates on paste #98604

Merged

8 tasks

fluttergithubbot closed this as completed in #98604 Feb 24, 2022

github-actions bot locked as resolved and limited conversation to collaborators Mar 10, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Invalid TextField scroll offset change on paste from toolbar #96658

Invalid TextField scroll offset change on paste from toolbar #96658

tgucio commented Jan 14, 2022

tgucio commented Jan 14, 2022 •

edited

Loading

danagbemava-nc commented Jan 14, 2022

tgucio commented Jan 14, 2022

danagbemava-nc commented Jan 17, 2022 •

edited

Loading

HansMuller commented Jan 18, 2022

github-actions bot commented Mar 10, 2022

Invalid TextField scroll offset change on paste from toolbar #96658

Invalid TextField scroll offset change on paste from toolbar #96658

Comments

tgucio commented Jan 14, 2022

Steps to Reproduce

tgucio commented Jan 14, 2022 • edited Loading

danagbemava-nc commented Jan 14, 2022

tgucio commented Jan 14, 2022

danagbemava-nc commented Jan 17, 2022 • edited Loading

HansMuller commented Jan 18, 2022

github-actions bot commented Mar 10, 2022

tgucio commented Jan 14, 2022 •

edited

Loading

danagbemava-nc commented Jan 17, 2022 •

edited

Loading