Skip to content

text selection reacts only to SelectableText bounds  #78909

Closed
Closed
text selection reacts only to SelectableText bounds #78909
Labels
a: typographyText rendering, possibly libtxtfound in release: 2.0Found to occur in 2.0frameworkflutter/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: duplicateIssue is closed as a duplicate of an existing issue

Description

@nt4f04uNd
nt4f04uNd
opened on Mar 23, 2021

on web you can start/remove selection from any place of the page

in flutter you have to put the cursor directly into the bounds of SelectableText to start selection

and you can't tap outside it to cancel the selection as well - you have to click to another Selectable Text

code sample 
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      home: Scaffold(
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
            SelectableText('''
  loooooooooooooooooooooooooooooong selectable text
  loooooooooooooooooooooooooooooong selectable text
  loooooooooooooooooooooooooooooong selectable text
  loooooooooooooooooooooooooooooong selectable text
  loooooooooooooooooooooooooooooong selectable text
  loooooooooooooooooooooooooooooong selectable text
  loooooooooooooooooooooooooooooong selectable text
  loooooooooooooooooooooooooooooong selectable text
  loooooooooooooooooooooooooooooong selectable text
  loooooooooooooooooooooooooooooong selectable text
  loooooooooooooooooooooooooooooong selectable text
  loooooooooooooooooooooooooooooong selectable text
  loooooooooooooooooooooooooooooong selectable text
  loooooooooooooooooooooooooooooong selectable text
  '''       ),
              Text("you can't deselect by tapping me"),
              ElevatedButton(onPressed: () {}, child: Text('or me')),
              Text("or any other on page except SelectableText\n"),
              SelectableText('''
  loooooooooooooooooooooooooooooong selectable text
  loooooooooooooooooooooooooooooong selectable text
  loooooooooooooooooooooooooooooong selectable text
  loooooooooooooooooooooooooooooong selectable text
  loooooooooooooooooooooooooooooong selectable text
  loooooooooooooooooooooooooooooong selectable text
  loooooooooooooooooooooooooooooong selectable text
  loooooooooooooooooooooooooooooong selectable text
  loooooooooooooooooooooooooooooong selectable text
  loooooooooooooooooooooooooooooong selectable text
  loooooooooooooooooooooooooooooong selectable text
  loooooooooooooooooooooooooooooong selectable text
  loooooooooooooooooooooooooooooong selectable text
  loooooooooooooooooooooooooooooong selectable text
  '''       ),
            ],
          ),
        ),
      ),
    );
  }
}
flutter doctor -v 
[√] Flutter (Channel nt4f04und, 2.1.0-13.0.pre.192, on Microsoft Windows [Version 10.0.19041.867], locale ru-RU)
    • Flutter version 2.1.0-13.0.pre.192 at c:\dev\src\flutter
    • Framework revision c0bcb4fc16 (4 days ago), 2021-03-19 16:34:57 -0700
    • Engine revision e6db3a275e
    • Dart version 2.13.0 (build 2.13.0-149.0.dev)

[√] Android toolchain - develop for Android devices (Android SDK version 30.0.2)
    • Android SDK at C:\Users\danya\AppData\Local\Android\sdk
    • Platform android-30, build-tools 30.0.2
    • Java binary at: C:\Program Files\Android\Android Studio\jre\bin\java
    • Java version OpenJDK Runtime Environment (build 1.8.0_242-release-1644-b01)
    • All Android licenses accepted.

[√] Chrome - develop for the web
    • Chrome at C:\Program Files\Google\Chrome\Application\chrome.exe

[√] Visual Studio - develop for Windows (Visual Studio Community 2019 16.7.7)
    • Visual Studio at C:\Program Files (x86)\Microsoft Visual Studio\2019\Community
    • Visual Studio Community 2019 version 16.7.30621.155
    • Windows 10 SDK version 10.0.18362.0

[√] Android Studio (version 4.0)
    • Android Studio at C:\Program Files\Android\Android Studio
    • Flutter plugin version 50.0.1
    • Dart plugin version 193.7547
    • Java version OpenJDK Runtime Environment (build 1.8.0_242-release-1644-b01)

[√] VS Code (version 1.54.3)
    • VS Code at C:\Users\danya\AppData\Local\Programs\Microsoft VS Code
    • Flutter extension version 3.20.0

[√] Connected device (4 available)
    • Redmi Note 5 (mobile) • 40c9f14 • android-arm64  • Android 9 (API 28)
    • Windows (desktop)     • windows • windows-x64    • Microsoft Windows [Version 10.0.19041.867]
    • Chrome (web)          • chrome  • web-javascript • Google Chrome 89.0.4389.90
    • Edge (web)            • edge    • web-javascript • Microsoft Edge 89.0.774.57

• No issues found!
flutter.mp4
html.mp4

Activity

  1. marwan-at-work commented on Mar 24, 2021

    @marwan-at-work
    marwan-at-work
    on Mar 24, 2021

    I'd like to also add that using a MacBook, I'm quite used to "tripple clicking" a paragraph and have it the entire paragraph be fully selected.

    This does not currently work in Flutter web.

    Thanks!

  2. darshankawar
    added
    in triagePresently being triaged by the triage team
    on Mar 24, 2021

  3. darshankawar commented on Mar 24, 2021

    @darshankawar
    darshankawar
    on Mar 24, 2021
    Member
    78909.mov
    flutter doctor -v 
    
[✓] Flutter (Channel stable, 2.0.3, on Mac OS X 10.15.4 19E2269 darwin-x64,
    locale en-GB)
    • Flutter version 2.0.3 at /Users/dhs/documents/Fluttersdk/flutter
    • Framework revision 4d7946a68d (5 days ago), 2021-03-18 17:24:33 -0700
    • Engine revision 3459eb2436
    • Dart version 2.12.2

[!] Xcode - develop for iOS and macOS
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Xcode 12.3, Build version 12C33
    ! CocoaPods 1.9.3 out of date (1.10.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

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

[✓] Connected device (3 available)
    • iPhone 12 Pro Max (mobile) • A5473606-0213-4FD8-BA16-553433949729 • ios
      • com.apple.CoreSimulator.SimRuntime.iOS-14-3 (simulator)
    • macOS (desktop)            • macos                                •
      darwin-x64     • Mac OS X 10.15.4 19E2269 darwin-x64
    • Chrome (web)               • chrome                               •
      web-javascript • Google Chrome 89.0.4389.90

! Doctor found issues in 1 category.
  4. darshankawar
    added
    platform-webWeb applications specifically
    a: typographyText rendering, possibly libtxt
    p: material_uimaterial_ui package in flutter/packages
    frameworkflutter/packages/flutter repository. See also f: labels.
    found in release: 2.0Found to occur in 2.0
    has reproducible stepsThe issue has been confirmed reproducible and is ready to work on
    engineflutter/engine related. See also e: labels.
    and removed
    in triagePresently being triaged by the triage team
    on Mar 24, 2021

  5. nt4f04uNd commented on Mar 25, 2021

    @nt4f04uNd
    nt4f04uNd
    on Mar 25, 2021
    MemberAuthor

    @marwan-at-work what you are talking about is tracked in #63576

  6. yjbanov
    removed
    platform-webWeb applications specifically
    on Mar 25, 2021

  7. yjbanov commented on Mar 25, 2021

    @yjbanov
    yjbanov
    on Mar 25, 2021
    Contributor

    This is not web-specific, so removing the label.

  8. nt4f04uNd
    changed the title [-][web] text selection reacts only to SelectableText bounds [/-] [+]text selection reacts only to SelectableText bounds [/+] on Mar 25, 2021

  9. 2 remaining items

  10. chinmaygarde commented on Mar 29, 2021

    @chinmaygarde
    chinmaygarde
    on Mar 29, 2021
    Contributor

    cc @gspencergoog

  11. gspencergoog commented on Mar 29, 2021

    @gspencergoog
    gspencergoog
    on Mar 29, 2021
    Contributor

    @HansMuller who is working on selectable text these days?

  12. HansMuller commented on Mar 30, 2021

    @HansMuller
    HansMuller
    on Mar 30, 2021
    Contributor

    CC @chunhtai

  13. milosgaleta commented on Aug 23, 2021

    @milosgaleta
    milosgaleta
    on Aug 23, 2021

    How is this proposal progressing?

  14. justinmc commented on Aug 25, 2021

    @justinmc
    justinmc
    on Aug 25, 2021
    Contributor

    This reminds me of @jonahwilliams's recent text selection spikes: #86664 and #81849

  15. nt4f04uNd commented on Mar 10, 2022

    @nt4f04uNd
    nt4f04uNd
    on Mar 10, 2022
    MemberAuthor

    Duplicate of #72029

  16. nt4f04uNd
    closed this as completedon Mar 10, 2022

  17. creativecreatorormaybenot commented on Mar 10, 2022

    @creativecreatorormaybenot
    creativecreatorormaybenot
    on Mar 10, 2022
    Contributor

    @nt4f04uNd is this really a duplicate of #72029? The issue description focuses on mobile and I agree that the issues should be very similar, but as we know the text selection on web vs. mobile on Flutter is implemented entirely differently.

  18. nt4f04uNd commented on Mar 10, 2022

    @nt4f04uNd
    nt4f04uNd
    on Mar 10, 2022
    MemberAuthor

    They are both about web (the other issue is more about mobile behavior), but yeah, let's keep this one open to be sure both are properly fixed.

  19. nt4f04uNd
    reopened this on Mar 10, 2022

  20. nt4f04uNd commented on Mar 10, 2022

    @nt4f04uNd
    nt4f04uNd
    on Mar 10, 2022
    MemberAuthor

    Actually, it seems a duplicate of #81839, which already has a design doc, discussion and an open PR in progress :)

  21. nt4f04uNd
    closed this as completedon Mar 10, 2022
  22. nt4f04uNd
    added
    r: duplicateIssue is closed as a duplicate of an existing issue
    on Mar 10, 2022

  23. github-actions commented on Mar 24, 2022

    @github-actions
    github-actionsbot
    on Mar 24, 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.

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    a: typographyText rendering, possibly libtxtfound in release: 2.0Found to occur in 2.0frameworkflutter/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: duplicateIssue is closed as a duplicate of an existing issue

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions