SelectableText Widget Web & Desktop Allows Multiple Highlights #103725
Description
Steps to Reproduce
- Execute
flutter create selectableWidgetwith 3.0 installed - Modify
main.dartto useSelectableText()widgets instead ofText()and add an additionalSelectableText()widget - Execute
flutter runon the new selectableWidget flutter project - Highlight one
SelectableText()widget, and then highlight a differentSelectableText()widget
Expected results:
I expected after highlighting the second SelectableText() widget that the first one would unhighlight. This is typical web/desktop app behavior that majority of users are trained to expect.
Actual results:
Each additional highlight does NOT de highlight the previous selection, meaning every individual SelectableText() widget can be highlighted at the same time.
It's very likely this isn't a bug and is the expected way how SelectableText() is intended to work. But it goes against the expected behavior of how the user interacts with text on the web or desktop applications and is pretty confusing/jarring.
As far as I know SelectableText() widget is the only way to allow users to highlight and copy the text in an application. If I'm incorrect and there is another way please feel free to post a solution.
Code sample
``` return Scaffold(
appBar: AppBar(
// Here we take the value from the MyHomePage object that was created by
// the App.build method, and use it to set our appbar title.
title: Text(widget.title),
),
body: Center(
// Center is a layout widget. It takes a single child and positions it
// in the middle of the parent.
child: Column(
// Column is also a layout widget. It takes a list of children and
// arranges them vertically. By default, it sizes itself to fit its
// children horizontally, and tries to be as tall as its parent.
//
// Invoke "debug painting" (press "p" in the console, choose the
// "Toggle Debug Paint" action from the Flutter Inspector in Android
// Studio, or the "Toggle Debug Paint" command in Visual Studio Code)
// to see the wireframe for each widget.
//
// Column has various properties to control how it sizes itself and
// how it positions its children. Here we use mainAxisAlignment to
// center the children vertically; the main axis here is the vertical
// axis because Columns are vertical (the cross axis would be
// horizontal).
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
const SelectableText(
'You have pushed the button this many times:',
),
const SelectableText(
'More selectable text',
),
SelectableText(
'$_counter',
style: Theme.of(context).textTheme.headline4,
),
],
),
),
floatingActionButton: FloatingActionButton(
onPressed: _incrementCounter,
tooltip: 'Increment',
child: const Icon(Icons.add),
), // This trailing comma makes auto-formatting nicer for build methods.
);Logs
@prest ➜ version3 flutter analyze
Analyzing version3...
No issues found! (ran in 2.5s)
[✓] Flutter (Channel stable, 3.0.0, on Microsoft Windows [Version 10.0.25115.1000], locale en-US)
• Flutter version 3.0.0 at C:\dev\flutter
• Upstream repository https://github.com/flutter/flutter.git
• Framework revision ee4e09cce0 (4 days ago), 2022-05-09 16:45:18 -0700
• Engine revision d1b9a6938a
• Dart version 2.17.0
• DevTools version 2.12.2
[✓] Android toolchain - develop for Android devices (Android SDK version 31.0.0)
• Android SDK at C:\Users\prest\AppData\Local\Android\sdk
• Platform android-32, build-tools 31.0.0
• Java binary at: C:\Program Files\Android\Android Studio\jre\bin\java
• Java version OpenJDK Runtime Environment (build 11.0.12+7-b1504.28-7817840)
• All Android licenses accepted.
[✗] Chrome - develop for the web (Cannot find Chrome executable at .\Google\Chrome\Application\chrome.exe)
! Cannot find Chrome. Try setting CHROME_EXECUTABLE to a Chrome executable.
[✓] Visual Studio - develop for Windows (Visual Studio Community 2022 17.1.6)
• Visual Studio at C:\Program Files\Microsoft Visual Studio\2022\Community
• Visual Studio Community 2022 version 17.1.32421.90
• Windows 10 SDK version 10.0.19041.0
[✓] Android Studio (version 2021.2)
• Android Studio at C:\Program Files\Android\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 11.0.12+7-b1504.28-7817840)
[✓] VS Code (version 1.67.1)
• VS Code at C:\Users\prest\AppData\Local\Programs\Microsoft VS Code
• Flutter extension version 3.38.1
[✓] VS Code (version 1.68.0-insider)
• VS Code at C:\Users\prest\AppData\Local\Programs\Microsoft VS Code Insiders
• Flutter extension version 3.40.0
[✓] Connected device (3 available)
• Pixel 4 XL (mobile) • 9B071FFBA003B1 • android-arm64 • Android 12 (API 32)
• Windows (desktop) • windows • windows-x64 • Microsoft Windows [Version 10.0.25115.1000]
• Edge (web) • edge • web-javascript • Microsoft Edge 101.0.1210.39
[✓] HTTP Host Availability
• All required HTTP hosts are available
! Doctor found issues in 1 category.
Metadata
Metadata
Assignees
Labels
Issues that are less important to the Flutter projectEntering text in a text field or keyboard related problemsflutter/packages/flutter/material repository.SelectableRegion, SelectionArea, SelectionContainer, Selectable, and related APIsFound to occur in 3.10Found to occur in 3.13flutter/packages/flutter repository. See also f: labels.The issue has been confirmed reproducible and is ready to work onIssue is closed as already fixed in a newer versionOwned by Design Languages teamTriaged by Design Languages team