Skip to content

GestureRecognizer on TextSpan takes up all remaining spaces of a line instead just over the TextSpan #43400

Closed
Closed
GestureRecognizer on TextSpan takes up all remaining spaces of a line instead just over the TextSpan#43400
Labels
P2Important issues not at the top of the work lista: qualityA truly polished experiencea: typographyText rendering, possibly libtxtengineflutter/engine related. See also e: labels.found in release: 3.3Found to occur in 3.3found in release: 3.6Found to occur in 3.6frameworkflutter/packages/flutter repository. See also f: labels.has reproducible stepsThe issue has been confirmed reproducible and is ready to work onr: fixedIssue is closed as already fixed in a newer versionteam-engineOwned by Engine teamtriaged-engineTriaged by Engine team

Description

@huntrist
huntrist
opened on Oct 24, 2019
class Body extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.black,
      margin: EdgeInsets.all(100),
      child: RichText(
        softWrap: true,
        text: TextSpan(
          children: <InlineSpan>[
            TextSpan(
              text: "very_long_starting_text",
              style: TextStyle(
                color: Colors.red,
              )
            ),
            TextSpan(
              text: "                                         ",
              style: TextStyle(
                color: Colors.green,
                decoration: TextDecoration.lineThrough,
                decorationThickness: 2,
              )
            ),
            TextSpan(
              text: "trailing_text",
              style: TextStyle(
                color: Colors.yellow,
              ),
              recognizer: TapGestureRecognizer()
              ..onTap = () {
                //distinguish between real external link & jiki link
                print("clicked!");
              },
            )
          ],
        )
      ),
    );
  }
}

produces the following effect

{2AM_VG9Y(R_ (XAU9$O_W2

when click on the area after the yelllow "trailing_text"
"clicked!" is printed

flutter doctor -v

[√] Flutter (Channel stable, v1.9.1+hotfix.5, on Microsoft Windows [Version 10.0.18362.418], locale zh-CN)
    • Flutter version 1.9.1+hotfix.5 at D:\Env\flutter
    • Framework revision 1aedbb1835 (7 days ago), 2019-10-17 08:37:27 -0700
    • Engine revision b863200c37
    • Dart version 2.5.0

 
[√] Android toolchain - develop for Android devices (Android SDK version 29.0.2)
    • Android SDK at D:\Env\Android\SDK
    • Android NDK location not configured (optional; useful for native profiling support)
    • Platform android-29, build-tools 29.0.2
    • ANDROID_HOME = D:\Env\Android\SDK
    • Java binary at: D:\Executable\Android\AndroidStudio\jre\bin\java
    • Java version OpenJDK Runtime Environment (build 1.8.0_202-release-1483-b03)
    • All Android licenses accepted.

[√] Android Studio (version 3.5)
    • Android Studio at D:\Executable\Android\AndroidStudio
    • Flutter plugin version 40.1.2
    • Dart plugin version 191.8423
    • Java version OpenJDK Runtime Environment (build 1.8.0_202-release-1483-b03)

[√] Connected device (1 available)
    • Android SDK built for x86 • emulator-5554 • android-x86 • Android 10 (API 29) (emulator)

Activity

  1. iapicca
    added
    a: qualityA truly polished experience
    a: typographyText rendering, possibly libtxt
    c: performanceRelates to speed or footprint issues (see "perf:" labels)
    on Oct 24, 2019
  2. HansMuller
    removed
    c: performanceRelates to speed or footprint issues (see "perf:" labels)
    on Oct 25, 2019

  3. jason-simmons commented on Nov 7, 2019

    @jason-simmons
    jason-simmons
    on Nov 7, 2019
    Member

    This happens because ParagraphTxt::GetGlyphPositionAtCoordinate in the engine returns (last_position, upstream) for a coordinate beyond the end of the last text span.

    TextSpan.getSpanForPositionVisitor then decides that the (last_position, upstream) TextPosition falls within the last text span.

    This makes sense for positioning the caret in an editable text widget, but will be imprecise for hit testing the last span in non-editable text.

  4. VladyslavBondarenko
    added
    frameworkflutter/packages/flutter repository. See also f: labels.
    on Jan 15, 2020

  5. pedromassangocode commented on Aug 25, 2020

    @pedromassangocode
    pedromassangocode
    on Aug 25, 2020

    I was able to reproduce this on latest master channel. The area bellow the trailing_text is also clickable.

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

void main() {
  runApp(MaterialApp(
    title: 'Navigation Basics',
    home: Body(),
  ));
}
class Body extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.black,
      margin: EdgeInsets.all(100),
      child: RichText(
          softWrap: true,
          text: TextSpan(
            children: <InlineSpan>[
              TextSpan(
                  text: "very_long_starting_text",
                  style: TextStyle(
                    color: Colors.red,
                  )
              ),
              TextSpan(
                  text: "                                         ",
                  style: TextStyle(
                    color: Colors.green,
                    decoration: TextDecoration.lineThrough,
                    decorationThickness: 2,
                  )
              ),
              TextSpan(
                text: "trailing_text",
                style: TextStyle(
                  color: Colors.yellow,
                ),
                recognizer: TapGestureRecognizer()
                  ..onTap = () {
                    //distinguish between real external link & jiki link
                    print("clicked!");
                  },
              )
            ],
          )
      ),
    );
  }
}
    flutter doctor -v 
    [✓] Flutter (Channel master, 1.22.0-2.0.pre.59, on Mac OS X 10.15.6 19G2021,
    locale en)
    • Flutter version 1.22.0-2.0.pre.59 at
      /Users/pedromassango/dev/SDKs/flutter_master
    • Framework revision be7c7faee6 (8 hours ago), 2020-08-24 22:31:02 -0400
    • Engine revision 8107b36c7b
    • Dart version 2.10.0 (build 2.10.0-56.0.dev)

 
[!] Android toolchain - develop for Android devices (Android SDK version 30.0.1)
    • Android SDK at /Users/pedromassango/Library/Android/sdk
    • Platform android-30, build-tools 30.0.1
    • Java binary at: /Applications/Android
      Studio.app/Contents/jre/jdk/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build
      1.8.0_242-release-1644-b3-6222593)
    ! Some Android licenses not accepted.  To resolve this, run: flutter doctor
      --android-licenses

[✓] Xcode - develop for iOS and macOS (Xcode 11.6)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Xcode 11.6, Build version 11E708
    • CocoaPods version 1.9.3

[✓] Chrome - develop for the web
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[!] Android Studio (version 4.0)
    • Android Studio at /Applications/Android Studio.app/Contents
    ✗ Flutter plugin not installed; this adds Flutter specific functionality.
    ✗ Dart plugin not installed; this adds Dart specific functionality.
    • Java version OpenJDK Runtime Environment (build
      1.8.0_242-release-1644-b3-6222593)

[✓] IntelliJ IDEA Community Edition (version 2020.2)
    • IntelliJ at /Applications/IntelliJ IDEA CE.app
    • Flutter plugin version 48.1.4
    • Dart plugin version 202.6397.47

[!] VS Code (version 1.48.0)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    ✗ Flutter extension not installed; install from
      https://marketplace.visualstudio.com/items?itemName=Dart-Code.flutter

[✓] Connected device (4 available)
    • sdk gphone x86 (mobile) • emulator-5554 • android-x86    • Android 11 (API
      30) (emulator)
    • macOS (desktop)         • macos         • darwin-x64     • Mac OS X
      10.15.6 19G2021
    • Web Server (web)        • web-server    • web-javascript • Flutter Tools
    • Chrome (web)            • chrome        • web-javascript • Google Chrome
      84.0.4147.135

! Doctor found issues in 3 categories.
  6. pedromassangocode
    added
    found in release: 1.22Found to occur in 1.22
    has reproducible stepsThe issue has been confirmed reproducible and is ready to work on
    on Aug 25, 2020
  7. goderbauer
    added
    engineflutter/engine related. See also e: labels.
    on Oct 21, 2020
  8. kf6gpe
    added
    P2Important issues not at the top of the work list
    on Dec 10, 2020

  9. CaiWanFeng commented on Apr 15, 2021

    @CaiWanFeng
    CaiWanFeng
    on Apr 15, 2021

    I was able to reproduce this on latest master channel. The area bellow the trailing_text is also clickable.

    sample code
    flutter doctor -v

    Did you find any solution? @ianloic @anaisbetts @sgraham @gmoothart @sethladd

  10. CaiWanFeng commented on Apr 16, 2021

    @CaiWanFeng
    CaiWanFeng
    on Apr 16, 2021

    Appending a spacing TextSpan can fix this issue:

    TextSpan(
    text: 'your text',
),
TextSpan(
    // just append an spacing text
    text: ' ',
),

  11. danagbemava-nc commented on Dec 1, 2022

    @danagbemava-nc
    danagbemava-nc
    on Dec 1, 2022
    Member

    Still reproduces on the latest versions of flutter.

    recording
    Screen.Recording.2022-12-01.at.11.14.56.mov
    updated sample 
    import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';

void main() {
  runApp(const MaterialApp(
    title: 'Navigation Basics',
    home: Body(),
  ));
}
class Body extends StatelessWidget {
  const Body({super.key});

  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.black,
      margin: const EdgeInsets.all(100),
      child: RichText(
          softWrap: true,
          text: TextSpan(
            children: <InlineSpan>[
              const TextSpan(
                  text: "very_long_starting_text",
                  style: TextStyle(
                    color: Colors.red,
                  )
              ),
              const TextSpan(
                  text: "                                         ",
                  style: TextStyle(
                    color: Colors.green,
                    decoration: TextDecoration.lineThrough,
                    decorationThickness: 2,
                  )
              ),
              TextSpan(
                text: "trailing_text",
                style: const TextStyle(
                  color: Colors.yellow,
                ),
                recognizer: TapGestureRecognizer()
                  ..onTap = () {
                    //distinguish between real external link & jiki link
                    print("clicked!");
                  },
              )
            ],
          )
      ),
    );
  }
}
    flutter doctor -v 
    [✓] Flutter (Channel stable, 3.3.9, on macOS 13.0.1 22A400 darwin-arm, locale en-GB)
    • Flutter version 3.3.9 on channel stable at /Users/nexus/dev/sdks/flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision b8f7f1f986 (9 days ago), 2022-11-23 06:43:51 +0900
    • Engine revision 8f2221fbef
    • Dart version 2.18.5
    • DevTools version 2.15.0

[✓] Android toolchain - develop for Android devices (Android SDK version 33.0.0)
    • Android SDK at /Users/nexus/Library/Android/sdk
    • Platform android-33, build-tools 33.0.0
    • Java binary at: /Users/nexus/Library/Application Support/JetBrains/Toolbox/apps/AndroidStudio/ch-0/213.7172.25.2113.9123335/Android Studio.app/Contents/jre/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 11.0.13+0-b1751.21-8125866)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 14.1)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Build 14B47b
    • CocoaPods version 1.11.3

[✓] Chrome - develop for the web
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[!] Android Studio
    • Android Studio at /Applications/Android Studio Preview.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
    ✗ Unable to find bundled Java version.
    • Try updating or re-installing Android Studio.

[✓] Android Studio (version 2021.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.13+0-b1751.21-8125866)

[!] Android Studio
    • Android Studio at /Applications/Android Studio Preview 2.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
    ✗ Unable to find bundled Java version.
    • Try updating or re-installing Android Studio.

[✓] Android Studio (version 2021.3)
    • Android Studio at /Users/nexus/Library/Application Support/JetBrains/Toolbox/apps/AndroidStudio/ch-0/213.7172.25.2113.9123335/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.13+0-b1751.21-8125866)

[✓] Android Studio (version 2021.3)
    • Android Studio at /Users/nexus/Library/Application Support/JetBrains/Toolbox/apps/AndroidStudio/ch-0/213.7172.25.2113.9014738/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.13+0-b1751.21-8125866)

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

[✓] Connected device (4 available)
    • M2007J20CG (mobile)    • 5dd3be00                             • android-arm64  • Android 12 (API 31)
    • iPhone 14 Pro (mobile) • 4F72110C-F38B-4CF9-93C4-4D6042148D28 • ios            • com.apple.CoreSimulator.SimRuntime.iOS-16-1 (simulator)
    • macOS (desktop)        • macos                                • darwin-arm64   • macOS 13.0.1 22A400 darwin-arm
    • Chrome (web)           • chrome                               • web-javascript • Google Chrome 108.0.5359.71

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

! Doctor found issues in 2 categories.

    [!] Flutter (Channel master, 3.6.0-13.0.pre.24, on macOS 13.0.1 22A400 darwin-arm64, locale en-GB)
    • Flutter version 3.6.0-13.0.pre.24 on channel master at /Users/nexus/dev/sdks/flutters
    ! Warning: `flutter` on your path resolves to /Users/nexus/dev/sdks/flutter/bin/flutter, which is not inside your current Flutter SDK checkout at /Users/nexus/dev/sdks/flutters. Consider adding /Users/nexus/dev/sdks/flutters/bin to the front of your path.
    ! Warning: `dart` on your path resolves to /Users/nexus/dev/sdks/flutter/bin/dart, which is not inside your current Flutter SDK checkout at /Users/nexus/dev/sdks/flutters. Consider adding /Users/nexus/dev/sdks/flutters/bin to the front of your path.
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 4878f26ab0 (7 hours ago), 2022-11-30 23:18:19 -0500
    • Engine revision 441229a95c
    • Dart version 2.19.0 (build 2.19.0-444.0.dev)
    • DevTools version 2.20.0
    • If those were intentional, you can disregard the above warnings; however it is recommended to use "git" directly to perform update checks and upgrades.

[✓] Android toolchain - develop for Android devices (Android SDK version 33.0.0)
    • Android SDK at /Users/nexus/Library/Android/sdk
    • Platform android-33, build-tools 33.0.0
    • Java binary at: /Users/nexus/Library/Application Support/JetBrains/Toolbox/apps/AndroidStudio/ch-0/213.7172.25.2113.9123335/Android Studio.app/Contents/jre/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 11.0.13+0-b1751.21-8125866)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 14.1)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Build 14B47b
    • CocoaPods version 1.11.3

[✓] Chrome - develop for the web
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[!] Android Studio
    • Android Studio at /Applications/Android Studio Preview.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
    ✗ Unable to find bundled Java version.
    • Try updating or re-installing Android Studio.

[✓] Android Studio (version 2021.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.13+0-b1751.21-8125866)

[!] Android Studio
    • Android Studio at /Applications/Android Studio Preview 2.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
    ✗ Unable to find bundled Java version.
    • Try updating or re-installing Android Studio.

[✓] Android Studio (version 2021.3)
    • Android Studio at /Users/nexus/Library/Application Support/JetBrains/Toolbox/apps/AndroidStudio/ch-0/213.7172.25.2113.9123335/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.13+0-b1751.21-8125866)

[✓] Android Studio (version 2021.3)
    • Android Studio at /Users/nexus/Library/Application Support/JetBrains/Toolbox/apps/AndroidStudio/ch-0/213.7172.25.2113.9014738/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.13+0-b1751.21-8125866)

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

[✓] Connected device (4 available)
    • M2007J20CG (mobile)    • 5dd3be00                             • android-arm64  • Android 12 (API 31)
    • iPhone 14 Pro (mobile) • 4F72110C-F38B-4CF9-93C4-4D6042148D28 • ios            • com.apple.CoreSimulator.SimRuntime.iOS-16-1 (simulator)
    • macOS (desktop)        • macos                                • darwin-arm64   • macOS 13.0.1 22A400 darwin-arm64
    • Chrome (web)           • chrome                               • web-javascript • Google Chrome 108.0.5359.71

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

! Doctor found issues in 3 categories.
  12. danagbemava-nc
    removed
    found in release: 1.22Found to occur in 1.22
    on Dec 1, 2022

  13. 9 remaining items

  14. auto-submit
    added a commit that references this issue on Jan 2, 2024

    Reland "Make `TextSpan` hit testing precise." (#140468) (#140621)

    5883a6c

  15. gnprice commented on Jan 4, 2024

    @gnprice
    gnprice
    on Jan 4, 2024
    Member

    Fixed by #140621.

  16. gnprice
    closed this as completedon Jan 4, 2024
  17. danagbemava-nc
    added
    r: fixedIssue is closed as already fixed in a newer version
    on Jan 4, 2024

  18. github-actions commented on Jan 18, 2024

    @github-actions
    github-actionsbot
    on Jan 18, 2024 – with 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.

  19. github-actions
    locked as resolved and limited conversation to collaborators on Jan 18, 2024
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

    P2Important issues not at the top of the work lista: qualityA truly polished experiencea: typographyText rendering, possibly libtxtengineflutter/engine related. See also e: labels.found in release: 3.3Found to occur in 3.3found in release: 3.6Found to occur in 3.6frameworkflutter/packages/flutter repository. See also f: labels.has reproducible stepsThe issue has been confirmed reproducible and is ready to work onr: fixedIssue is closed as already fixed in a newer versionteam-engineOwned by Engine teamtriaged-engineTriaged by Engine team

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions