[SelectableText widget] Jumpy scrolling when doing long press gesture to select text

[ilovesardine]

Initial Information

Suppose I have a full-height container with only SelectableText widget inside which will fill the height of container. Inside the widget is a long text (for example 6 paragraphs of Lorem Ipsum) so naturally the widget will be scrollable and some text will be obscured.

Sample code:

class Sample extends StatefulWidget {
  Sample ({Key key}) : super(key: key);

  @override
  _Sample State createState() => _Sample State();
}

class _Sample State extends State<Sample> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Container(
          child: SelectableText(
           ...long text here...
          ),
        ),
      ),
    );
  }
}

Steps to Reproduce

CASE 1

1. After page finishes building, select a word at the beginning of the text by long pressing it.
2. Cancel selection by tapping anywhere on the text.
3. Scroll down until the previously selected word gets obscured (In this case, to max scroll offset).
4. Select a word by again long pressing it.

CASE 2

1. After page finishes building, scroll down to max scroll offset.
2. Select a word by long pressing it.
3. Cancel selection by tapping anywhere on the text.
4. Scroll up until previously selected word is obscured (In this case, to min scroll offset).
5. Select a word by again long pressing it.

Expected results:

The word is highlighted.

Actual results:

CASE 1 and CASE 2
The word is highlighted, but;
Widget gets jumpy and scrolls in the direction of where the initially selected word is located on screen.

Additional Info

Issue only happens when I select a word by long-pressing it. This doesn't happen if I double tap on it.
Issue also happens on SelectableText.rich widget.

Logs

Doctor summary (to see all details, run flutter doctor -v):
[√] Flutter (Channel unknown, 2.5.0, on Microsoft Windows [Version 10.0.18363.1256], locale en-ID)
[√] Android toolchain - develop for Android devices (Android SDK version 30.0.3)
[√] Chrome - develop for the web
[√] Android Studio (version 2020.3)
[√] VS Code (version 1.60.2)
[√] Connected device (2 available)

[danagbemava-nc]

Issue is reproducible on master and stable.

See attached video.

code sample

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    home: Sample(),
  ));
}

class Sample extends StatefulWidget {
  Sample({Key? key}) : super(key: key);

  @override
  _SampleState createState() => _SampleState();
}

class _SampleState extends State<Sample> {
  final loremIpsum = '''
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. A cras semper auctor neque vitae tempus. Eros donec ac odio tempor orci dapibus ultrices in. Faucibus vitae aliquet nec ullamcorper sit amet risus. Id ornare arcu odio ut sem nulla pharetra diam sit. Egestas congue quisque egestas diam in arcu cursus euismod. Leo vel orci porta non pulvinar neque. Sit amet consectetur adipiscing elit duis. Tristique senectus et netus et. Vestibulum mattis ullamcorper velit sed ullamcorper morbi tincidunt ornare massa. Neque vitae tempus quam pellentesque nec nam. Viverra nibh cras pulvinar mattis nunc sed. Lorem dolor sed viverra ipsum nunc aliquet. Justo nec ultrices dui sapien eget mi proin. Vitae elementum curabitur vitae nunc sed. Adipiscing vitae proin sagittis nisl. Egestas egestas fringilla phasellus faucibus scelerisque. Enim nunc faucibus a pellentesque sit amet porttitor. Rhoncus est pellentesque elit ullamcorper dignissim cras tincidunt lobortis.
Orci phasellus egestas tellus rutrum. Fringilla phasellus faucibus scelerisque eleifend donec pretium vulputate sapien. Mattis ullamcorper velit sed ullamcorper morbi tincidunt. Eu sem integer vitae justo eget magna fermentum iaculis. Faucibus nisl tincidunt eget nullam non nisi est sit amet. Pharetra magna ac placerat vestibulum. Est velit egestas dui id ornare. Nunc consequat interdum varius sit. Nunc sed id semper risus in hendrerit gravida. Eu facilisis sed odio morbi quis commodo. Varius quam quisque id diam vel. Velit aliquet sagittis id consectetur purus ut. Varius duis at consectetur lorem donec massa sapien faucibus et. Eget mauris pharetra et ultrices neque ornare aenean. Suspendisse sed nisi lacus sed viverra tellus in hac habitasse. Bibendum est ultricies integer quis auctor elit sed. Massa sed elementum tempus egestas sed sed. Quisque non tellus orci ac auctor augue mauris.
Id ornare arcu odio ut sem nulla pharetra. Aliquam ut porttitor leo a. Facilisis sed odio morbi quis commodo. Urna et pharetra pharetra massa massa ultricies. Cursus mattis molestie a iaculis at erat. Enim blandit volutpat maecenas volutpat blandit aliquam etiam erat. Nulla aliquet porttitor lacus luctus accumsan tortor posuere ac. Faucibus pulvinar elementum integer enim neque volutpat ac tincidunt. Urna duis convallis convallis tellus id interdum. Rhoncus urna neque viverra justo nec. Cras sed felis eget velit aliquet. Phasellus faucibus scelerisque eleifend donec pretium vulputate sapien nec. Cras tincidunt lobortis feugiat vivamus at augue. Integer feugiat scelerisque varius morbi enim nunc. Sed viverra tellus in hac.
Pellentesque sit amet porttitor eget dolor morbi. Phasellus vestibulum lorem sed risus ultricies. Posuere urna nec tincidunt praesent. Risus feugiat in ante metus dictum. Lacus sed turpis tincidunt id aliquet. Aenean et tortor at risus viverra adipiscing. Morbi non arcu risus quis varius quam quisque id diam. Est ante in nibh mauris cursus mattis molestie a iaculis. Dolor sit amet consectetur adipiscing. Blandit libero volutpat sed cras ornare arcu. Massa massa ultricies mi quis hendrerit dolor. Sagittis eu volutpat odio facilisis mauris sit amet. Posuere urna nec tincidunt praesent semper feugiat nibh sed. Nec ullamcorper sit amet risus nullam eget felis eget nunc. Amet luctus venenatis lectus magna fringilla urna porttitor. Amet consectetur adipiscing elit pellentesque habitant morbi tristique. Odio pellentesque diam volutpat commodo sed egestas. Sit amet purus gravida quis blandit turpis cursus in. Purus semper eget duis at tellus at urna. At in tellus integer feugiat scelerisque varius.

Risus sed vulputate odio ut. Arcu bibendum at varius vel pharetra vel. Arcu cursus euismod quis viverra nibh. Tempor orci dapibus ultrices in iaculis nunc sed augue. Aliquam ut porttitor leo a diam sollicitudin tempor. Libero justo laoreet sit amet cursus sit amet dictum sit. Scelerisque felis imperdiet proin fermentum leo vel orci porta non. Et odio pellentesque diam volutpat commodo sed. Tortor vitae purus faucibus ornare suspendisse sed nisi. Id diam maecenas ultricies mi eget mauris pharetra et. Fusce ut placerat orci nulla pellentesque dignissim enim sit. Sed arcu non odio euismod. Tincidunt id aliquet risus feugiat in ante metus dictum. Ac ut consequat semper viverra. Lacus vestibulum sed arcu non. Ipsum dolor sit amet consectetur adipiscing elit ut aliquam.
  ''';

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Container(
          child: SingleChildScrollView(
            child: SelectableText(loremIpsum),
          ),
        ),
      ),
    );
  }
}

flutter doctor -v

[✓] Flutter (Channel stable, 2.5.2, on macOS 11.5.1 20G80 darwin-arm, locale en-GB)
    • Flutter version 2.5.2 at /Users/nexus/dev/sdks/flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 3595343e20 (8 days ago), 2021-09-30 12:58:18 -0700
    • Engine revision 6ac856380f
    • Dart version 2.14.3

[✓] 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 at /Applications/Xcode.app/Contents/Developer
    • Xcode 12.5.1, Build version 12E507
    • 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)

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

[✓] Connected device (4 available)
    • sdk gphone64 arm64 (mobile) • emulator-5554             • android-arm64  • Android 12 (API 31) (emulator)
    • Nexus’ IPhone (mobile)      • 00008020-001875E83A38002E • ios            • iOS 14.8 18H17
    • macOS (desktop)             • macos                     • darwin-arm64   • macOS 11.5.1 20G80 darwin-arm
    • Chrome (web)                • chrome                    • web-javascript • Google Chrome 94.0.4606.71

• No issues found!

[✓] Flutter (Channel master, 2.6.0-12.0.pre.268, on macOS 11.5.1 20G80 darwin-arm, locale en-GB)
    • Flutter version 2.6.0-12.0.pre.268 at /Users/nexus/dev/sdks/flutters
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision b9d2177da0 (6 hours ago), 2021-10-07 21:11:07 -0700
    • Engine revision 8d64613c9b
    • Dart version 2.15.0 (build 2.15.0-178.0.dev)

[✓] 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 12.5.1)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    ! Flutter recommends a minimum Xcode version of 13.0.0.
      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

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

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

[✓] Connected device (4 available)
    • sdk gphone64 arm64 (mobile) • emulator-5554             • android-arm64  • Android 12 (API 31) (emulator)
    • Nexus’ IPhone (mobile)      • 00008020-001875E83A38002E • ios            • iOS 14.8 18H17
    • macOS (desktop)             • macos                     • darwin-arm64   • macOS 11.5.1 20G80 darwin-arm
    • Chrome (web)                • chrome                    • web-javascript • Google Chrome 94.0.4606.71

! Doctor found issues in 1 category.

repro video

RPReplay_Final1633686850.MP4

[HansMuller]

CC @chunhtai

[ilovesardine]

Any update on this? @chunhtai @HansMuller

[burhanaksendir]

I have the same problem. Did you find any solution or workaround? Any update on this? @danagbemava-nc @chunhtai @HansMuller

[EslamAbotaleb]

@danagbemava-nc dear the problem does not appear with you because you choose from the first line in the text after that if you select any text from the paragraph the problem does not appear so you can test it in the first run scroll down and select the text from the bottom of the problem it will appear so this is a problem that appears the first time in just run

[EslamAbotaleb]

@burhanaksendir you can add this parameter (autofocus: true) in SelectableText will solve your problem, I tested that, and work fine , why add autofocus = true to make default selection text and then go to the bottom text and select specific part not jump to top

[burhanaksendir]

@burhanaksendir you can add this parameter (autofocus: true) in SelectableText will solve your problem, I tested that, and work fine , why add autofocus = true to make default selection text and then go to the bottom text and select specific part not jump to top

Thanks, but this does not fix the problem.

[EslamAbotaleb]

@burhanaksendir you can text that
import 'package:flutter/material.dart';

void main() {
runApp(MaterialApp(
home: Sample(),
));
}

class Sample extends StatefulWidget {
Sample({Key? key}) : super(key: key);

@OverRide
_SampleState createState() => _SampleState();
}

class _SampleState extends State {
final loremIpsum = '''
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. A cras semper auctor neque vitae tempus. Eros donec ac odio tempor orci dapibus ultrices in. Faucibus vitae aliquet nec ullamcorper sit amet risus. Id ornare arcu odio ut sem nulla pharetra diam sit. Egestas congue quisque egestas diam in arcu cursus euismod. Leo vel orci porta non pulvinar neque. Sit amet consectetur adipiscing elit duis. Tristique senectus et netus et. Vestibulum mattis ullamcorper velit sed ullamcorper morbi tincidunt ornare massa. Neque vitae tempus quam pellentesque nec nam. Viverra nibh cras pulvinar mattis nunc sed. Lorem dolor sed viverra ipsum nunc aliquet. Justo nec ultrices dui sapien eget mi proin. Vitae elementum curabitur vitae nunc sed. Adipiscing vitae proin sagittis nisl. Egestas egestas fringilla phasellus faucibus scelerisque. Enim nunc faucibus a pellentesque sit amet porttitor. Rhoncus est pellentesque elit ullamcorper dignissim cras tincidunt lobortis.
Orci phasellus egestas tellus rutrum. Fringilla phasellus faucibus scelerisque eleifend donec pretium vulputate sapien. Mattis ullamcorper velit sed ullamcorper morbi tincidunt. Eu sem integer vitae justo eget magna fermentum iaculis. Faucibus nisl tincidunt eget nullam non nisi est sit amet. Pharetra magna ac placerat vestibulum. Est velit egestas dui id ornare. Nunc consequat interdum varius sit. Nunc sed id semper risus in hendrerit gravida. Eu facilisis sed odio morbi quis commodo. Varius quam quisque id diam vel. Velit aliquet sagittis id consectetur purus ut. Varius duis at consectetur lorem donec massa sapien faucibus et. Eget mauris pharetra et ultrices neque ornare aenean. Suspendisse sed nisi lacus sed viverra tellus in hac habitasse. Bibendum est ultricies integer quis auctor elit sed. Massa sed elementum tempus egestas sed sed. Quisque non tellus orci ac auctor augue mauris.
Id ornare arcu odio ut sem nulla pharetra. Aliquam ut porttitor leo a. Facilisis sed odio morbi quis commodo. Urna et pharetra pharetra massa massa ultricies. Cursus mattis molestie a iaculis at erat. Enim blandit volutpat maecenas volutpat blandit aliquam etiam erat. Nulla aliquet porttitor lacus luctus accumsan tortor posuere ac. Faucibus pulvinar elementum integer enim neque volutpat ac tincidunt. Urna duis convallis convallis tellus id interdum. Rhoncus urna neque viverra justo nec. Cras sed felis eget velit aliquet. Phasellus faucibus scelerisque eleifend donec pretium vulputate sapien nec. Cras tincidunt lobortis feugiat vivamus at augue. Integer feugiat scelerisque varius morbi enim nunc. Sed viverra tellus in hac.
Pellentesque sit amet porttitor eget dolor morbi. Phasellus vestibulum lorem sed risus ultricies. Posuere urna nec tincidunt praesent. Risus feugiat in ante metus dictum. Lacus sed turpis tincidunt id aliquet. Aenean et tortor at risus viverra adipiscing. Morbi non arcu risus quis varius quam quisque id diam. Est ante in nibh mauris cursus mattis molestie a iaculis. Dolor sit amet consectetur adipiscing. Blandit libero volutpat sed cras ornare arcu. Massa massa ultricies mi quis hendrerit dolor. Sagittis eu volutpat odio facilisis mauris sit amet. Posuere urna nec tincidunt praesent semper feugiat nibh sed. Nec ullamcorper sit amet risus nullam eget felis eget nunc. Amet luctus venenatis lectus magna fringilla urna porttitor. Amet consectetur adipiscing elit pellentesque habitant morbi tristique. Odio pellentesque diam volutpat commodo sed egestas. Sit amet purus gravida quis blandit turpis cursus in. Purus semper eget duis at tellus at urna. At in tellus integer feugiat scelerisque varius.

Risus sed vulputate odio ut. Arcu bibendum at varius vel pharetra vel. Arcu cursus euismod quis viverra nibh. Tempor orci dapibus ultrices in iaculis nunc sed augue. Aliquam ut porttitor leo a diam sollicitudin tempor. Libero justo laoreet sit amet cursus sit amet dictum sit. Scelerisque felis imperdiet proin fermentum leo vel orci porta non. Et odio pellentesque diam volutpat commodo sed. Tortor vitae purus faucibus ornare suspendisse sed nisi. Id diam maecenas ultricies mi eget mauris pharetra et. Fusce ut placerat orci nulla pellentesque dignissim enim sit. Sed arcu non odio euismod. Tincidunt id aliquet risus feugiat in ante metus dictum. Ac ut consequat semper viverra. Lacus vestibulum sed arcu non. Ipsum dolor sit amet consectetur adipiscing elit ut aliquam.
''';

@OverRide
Widget build(BuildContext context) {
return Scaffold(
body: SafeArea(
child: Container(
child: SelectableText(loremIpsum, autofocus: true),
),
),
);
}
}

If you make autofocus with-in false will issue appear another case if true issue will disappear i was test that

[burhanaksendir]

@EslamAbotaleb Thanks, I've tried. You can see the problem in the video.

Flutter (Channel stable, 2.8.1, on macOS 12.1 21C52 darwin-x64, locale tr-TR)
• Flutter version 2.8.1
• Upstream repository https://github.com/flutter/flutter.git
• Framework revision 77d935a (5 weeks ago), 2021-12-16 08:37:33 -0800
• Engine revision 890a5fca2e
• Dart version 2.15.1

jump.mp4

[EslamAbotaleb]

@burhanaksendir You can change value autofocus from false into true and test again

[burhanaksendir]

@EslamAbotaleb I've tried. The result has not changed.

Jumpy_Scrolling.mp4

[EslamAbotaleb]

@burhanaksendir
https://user-images.githubusercontent.com/50490125/150678494-4eb8fedc-8f1e-4ef2-ad1e-2637e2af3883.mp4

[CPMoviePHil]

@burhanaksendir https://user-images.githubusercontent.com/50490125/150678494-4eb8fedc-8f1e-4ef2-ad1e-2637e2af3883.mp4

i have faced the same issue here, on a real android device with almost same code.
when you set autofocus=true, it solved the problem that you scrolled to bottom and long pressed then jump to middle. but when position in the top, long press would immediately jumping to middle.

[burhanaksendir]

@CPMoviePHil .
Hi,
Unfortunately I couldn't find a way to fix this problem. But the following answer may be a temporary solution:

https://stackoverflow.com/a/70659475

[CPMoviePHil]

@burhanaksendir
yeah, it's a really bad solution, it can affect the whole project just by changing it.

[CPMoviePHil]

Any update on this? @chunhtai @HansMuller
or give us some answer that what cause this issue here?

[avdosev]

Based on this answer https://stackoverflow.com/a/70659475 then the problem starts from here #75604

[S-Man42]

Any solution so far? I have the same problem for Text, SelectableText and TextField

[snoe]

https://pub.dev/packages/extended_text seems to work as a replacement for text and selectabletext...

[rgevrek]

Any updates on this?
The issue seams to be in EditableText, which is used in SelectableText, to "ensure" that selected text is visible, also if the virtual keyboard of the smartphone appears, which is never the case on SelectableText, if it is not editable.
The issue is in the method _scheduleShowCaretOnScreen().

[LongCatIsLooong]

@rgevrek instead of avoiding showing caret on screen when the selection is not collapsed, _scheduleShowCaretOnScreen should probably scroll to reveal the entire selection.

[rgevrek]

@LongCatIsLooong I see the point, but if the selection is taller than the visible area, you need to display part of the selection based on the direction you are enhancing the selection. Maybe you can use the last touched selection edge as indicator, but in current implementation by enhancing selection, the viewport scrolls in right direction in the enhancing direction.
For a programmatic selection by SelectionController there is currently no scrolling initiated.
Are you intending to scroll automatically, also if a selection is triggered via SelectionController?
This behaviour I would see as a feature or a change, not as a fix, and is currently possible via setting the cursor first, followed by text selection, boths programmatically.

[JohannaShiri]

Is there an estimation for a fix?

[S-Man42]

Is there any chance for fix? I still have the problem. I just saw the contribution for a possible fix (#102270) but it seems to be revoked as I understood the timeline...?

[rgevrek]

Is there any chance for fix? I still have the problem. I just saw the contribution for a possible fix (#102270) but it seems to be revoked as I understood the timeline...?

The initial fix is revoked from master due to Google internal pipeline errors. @LongCatIsLooong is taking care and would fix.

[Tabenkin]

https://pub.dev/packages/extended_text seems to work as a replacement for text and selectabletext...

This package doesn't support long press. Here's a package that works quite well, supports long press and double tap to select.

https://pub.dev/packages/selectable

[Renzo-Olivares]

I can't seem to reproduce this issue on master trying the instructions in the original post.

Screen.Recording.2023-06-21.at.10.41.05.AM.mov

[github-actions]

Without additional information, we are unfortunately not sure how to resolve this issue. We are therefore reluctantly going to close this bug for now.
If you find this problem please file a new issue with the same description, what happens, logs and the output of 'flutter doctor -v'. All system setups can be slightly different so it's always better to open new issues and reference the related ones.
Thanks for your contribution.

[github-actions]

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.