Selection toolbar/handler should disappear when it is opened and user clicks outside of it

@justinmc

Steps to Reproduce - Issue /1

Run the code bellow as mobile-web (or go to this deployed website: https://epic-thompson-badb9e.netlify.app/#/).
Select text in the text_field/selectable_text.
Tap outside of the text_field/selectable_text

Expected results: The selection toolbar/handler should disappear.
Actual results: Selection toolbar/handler is still visible and the only way to remove it is to select one of the options in the toolbar.

Note: while reproducing you can notice some unwanted behavior: double tap select text but not show selection toolbar. Let's focus on the actual issue.

Side Note - issue /2

About the selection toolbar not disappearing reproduces on stable and on master channel. The toolbar not disappearing on mobile apps does not follow the Material Design rules: https://material.io/design/platform-guidance/android-text-selection-toolbar.html which says:

Run the code bellow.
Select text in the text_field/selectable_text.
Tap outside of the text_field/selectable_text

Expected results: The selection toolbar should disappear.
Actual results: Selection toolbar is still visible and the only way to remove it is to select one of the options in the toolbar.

Flutter Code

import 'package:flutter/material.dart';

void main() => runApp(SampleWidget());

class SampleWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
            child: Column(
              mainAxisSize: MainAxisSize.min,
              children: [
                TextField(
                  controller: TextEditingController(text: 'Flutter is great\nChange my mind.'),
                  minLines: 3,
                  maxLines: 5,
                ),
                Padding(
                  padding: const EdgeInsets.all(32),
                  child: SelectableText("Flutter is great. Change my mind."),
                ),
              ],
            ),
        ),
      ),
    );
  }
}

flutter doctor -v

[✓] Flutter (Channel master, 1.25.0-5.0.pre.125, on Mac OS X 10.15.7 19H2 darwin-x64, locale en)
    • Flutter version 1.25.0-5.0.pre.125 at /Users/pedromassango/dev/SDKs/flutter_master
    • Framework revision a12e2a473a (18 hours ago), 2020-12-08 23:13:04 -0500
    • Engine revision df39e5c515
    • Dart version 2.12.0 (build 2.12.0-133.0.dev)

[✓] Android toolchain - develop for Android devices (Android SDK version 30.0.2)
    • Android SDK at /Users/pedromassango/Library/Android/sdk
    • Platform android-30, build-tools 30.0.2
    • 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-6915495)
    • All Android licenses accepted.

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

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

[✓] Android Studio (version 4.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 1.8.0_242-release-1644-b3-6915495)

[✓] IntelliJ IDEA Community Edition (version 2020.2.4)
    • IntelliJ at /Applications/IntelliJ IDEA CE.app
    • Flutter plugin version 52.0.4
    • Dart plugin version 202.8070

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

[✓] Connected device (3 available)
    • sdk gphone x86 arm (mobile) • emulator-5554 • android-x86    • Android 11 (API 30) (emulator)
    • macOS (desktop)             • macos         • darwin-x64     • Mac OS X 10.15.7 19H2 darwin-x64
    • Chrome (web)                • chrome        • web-javascript • Google Chrome 87.0.4280.88

• No issues found!

It is kinda two issues into one but maybe it is fine since they may be solved in the same PR.

Cc @justinmc @chunhtai

@pedromassango

Hi @pedromassango
I can reproduce on both stable & master, when using Gmail or Google App, it works as stated in material design guidelines

multiple flutter doctor -v

[✓] Flutter (Channel stable, 1.22.4, on Microsoft Windows [Version 10.0.19042.630], locale en-US)
    • Flutter version 1.22.4 at C:\Code\flutter_stable
    • Framework revision 1aafb3a8b9 (4 weeks ago), 2020-11-13 09:59:28 -0800
    • Engine revision 2c956a31c0
    • Dart version 2.10.4


[✓] Android toolchain - develop for Android devices (Android SDK version 30.0.3)
    • Android SDK at C:\Code\sdk
    • Platform android-30, build-tools 30.0.3
    • ANDROID_HOME = C:\Code\sdk
    • Java binary at: C:\Code\android-studio\jre\bin\java
    • Java version OpenJDK Runtime Environment (build 1.8.0_242-release-1644-b01)
    • All Android licenses accepted.

[!] Android Studio (version 4.1.0)
    • Android Studio at C:\Code\android-studio
    ✗ 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-b01)

[✓] VS Code (version 1.51.1)
    • VS Code at C:\Users\Taha\AppData\Local\Programs\Microsoft VS Code
    • Flutter extension version 3.17.0

[✓] Connected device (1 available)
    • sdk gphone x86 (mobile) • emulator-5554 • android-x86 • Android 11 (API 30) (emulator)

! Doctor found issues in 1 category.

[✓] Flutter (Channel master, 1.25.0-5.0.pre.141, on Microsoft Windows [Version 10.0.19042.630], locale en-US)
    • Flutter version 1.25.0-5.0.pre.141 at C:\Code\flutter_master
    • Framework revision 36bed2b4c3 (8 hours ago), 2020-12-09 20:13:04 -0500
    • Engine revision 8518a5bbe6
    • Dart version 2.12.0 (build 2.12.0-135.0.dev)

[✓] Android toolchain - develop for Android devices (Android SDK version 30.0.3)
    • Android SDK at C:\Code\sdk
    • Platform android-30, build-tools 30.0.3
    • ANDROID_HOME = C:\Code\sdk
    • Java binary at: C:\Code\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.8.2)
    • Visual Studio at C:\Program Files (x86)\Microsoft Visual Studio\2019\Community
    • Visual Studio Community 2019 version 16.8.30717.126
    • Windows 10 SDK version 10.0.18362.0

[✓] Android Studio (version 4.1.0)
    • Android Studio at C:\Code\android-studio
    • 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 1.8.0_242-release-1644-b01)

[✓] IntelliJ IDEA Community Edition (version 2020.3)
    • IntelliJ at C:\Program Files\JetBrains\IntelliJ IDEA Community Edition 2020.2.4
    • Flutter plugin version 52.0.5
    • Dart plugin version 203.5981.152

[✓] VS Code (version 1.51.1)
    • VS Code at C:\Users\Taha\AppData\Local\Programs\Microsoft VS Code
    • Flutter extension version 3.17.0

[✓] Connected device (4 available)
    • sdk gphone x86 (mobile) • emulator-5554 • android-x86    • Android 11 (API 30) (emulator)
    • Windows (desktop)       • windows       • windows-x64    • Microsoft Windows [Version 10.0.19042.630]
    • Chrome (web)            • chrome        • web-javascript • Google Chrome 87.0.4280.88
    • Edge (web)              • edge          • web-javascript • Microsoft Edge 87.0.664.57

• No issues found!

@justinmc

CC @justinmc

I am planning to unblock fixes for text editing inconsistencies like this through an upcoming refactor of EditableText (design doc, first PR).

There are lots of small problems like this, and fixing them in the current codebase is like whack-a-mole because the code and state that defines this behavior is so spread out among many widgets. That refactor will hopefully give us a single, simple place to define platform-specific behaviors like this.

That means a fix could be a long ways away. In the meantime, if anyone wants to try fixing this in the current code, you're welcome to have a shot at it.

This is also a problem on Desktop (tracked in #74255).

I did not specifically address this in #82575, but it is worth verifying if the behavior is any better after that change

I did not specifically address this in #82575, but it is worth verifying if the behavior is any better after that change

I still can reproduce this issue on latest master channel.

[✓] Flutter (Channel master, 2.3.0-17.0.pre.299, on macOS 11.4 20F71 darwin-arm,
    locale en-AO)
    • Flutter version 2.3.0-17.0.pre.299 at
      /Users/pedromassango/dev/sdk/flutter_master
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision db528a24a3 (22 minutes ago), 2021-06-10 11:52:42 -0400
    • Engine revision 6e03bbd42c
    • Dart version 2.14.0 (build 2.14.0-196.0.dev)

Ahh, yeah I disabled the feature entirely on mobile: https://github.com/flutter/flutter/blob/master/packages/flutter/lib/src/widgets/routes.dart#L2056

Try changing that line to false and checking the behavior

This issue is missing a priority label. Please set a priority label when adding the triaged-framework label.

@justinmc

@justinmc any chance we could "simply" focus the selected text and then when you tap outside we remove the focus & selection?

We have a usecase where wwe wrap the whole app in a SelectionArea, not sure that approach would for in this case tho as all text selection share the same widget.

Please check this issue: #186575

Navigation Menu

Repository navigation

Selection toolbar/handler should disappear when it is opened and user clicks outside of it #72029

Steps to Reproduce - Issue /1

Side Note - issue /2

14 remaining items

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Selection toolbar/handler should disappear when it is opened and user clicks outside of it #72029

Description

Steps to Reproduce - Issue /1

Side Note - issue /2

Activity

TahaTesser commented on Dec 10, 2020

HansMuller commented on Dec 10, 2020

justinmc commented on Dec 21, 2020

justinmc commented on Feb 8, 2021

jonahwilliams commented on Jun 9, 2021

pedromassango commented on Jun 10, 2021

jonahwilliams commented on Jun 10, 2021

14 remaining items

flutter-triage-bot commented on Sep 21, 2023

naiadelali commented on Feb 12, 2025

pedromassango commented on Jul 11, 2025

azzamt11 commented on May 15, 2026

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions