search

flutter / flutter

Flutter makes it easy and fast to build beautiful apps for mobile and beyond
https://flutter.dev
BSD 3-Clause "New" or "Revised" License
165.4k stars 27.29k forks source link

TapDown in a SelectionArea causes text field to lose focus #107327

Open justinmc opened 2 years ago

justinmc commented 2 years ago

SelectionArea temporarily steals the focus from a text field in its child widget tree on tap down. In the gif, notice that the field temporarily turns grey (because focus is lost) as I slowly tap.

out

To reproduce

  1. Run an app with a TextField in a SelectionArea, such as the app below.
  2. Enter some text.
  3. Tap in the field.

Expected: The field stays focused. Actual: The field briefly loses focus before being refocused on tap up.

Example ```dart import 'package:flutter/material.dart'; void main() { runApp(const MyApp()); } class MyApp extends StatelessWidget { const MyApp({Key? key}) : super(key: key); @override Widget build(BuildContext context) { return MaterialApp( title: 'Flutter Demo', theme: ThemeData( primarySwatch: Colors.blue, ), home: const MyHomePage(title: 'Flutter Demo Home Page'), ); } } class MyHomePage extends StatelessWidget { const MyHomePage({Key? key, required this.title}) : super(key: key); final String title; @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text(title), ), body: Center( child: Column( mainAxisAlignment: MainAxisAlignment.center, children: [ SelectionArea( child: Column( children: const [ Text('lorem ipsum'), TextField(), Text('lorem ipsum'), ], ), ), ], ), ), ); } } ```

CC @chunhtai

justinmc commented 2 years ago

This is still a problem even after @gspencergoog's TapRegion PR (https://github.com/flutter/flutter/pull/107262) was merged.

chunhtai commented 2 years ago

It looks like SelectionArea still the focus too fast. I think this can be fixed by request focus after a drag has started

huycozy commented 1 year ago

When verifying issue #128116, I was checking this issue and see that this issue only occurs on web and desktop platforms. Meanwhile, it doesn't appear on mobile (Android, iOS). Updating corresponding labels.

Android iOS Web MacOS Linux Windows
✅ ✅ ❌ ❌ ❌ ❌

✅: No Issue ❌: Issue reproduced

flutter doctor -v (stable and master) ```bash [✓] Flutter (Channel stable, 3.10.3, on macOS 13.0.1 22A400 darwin-x64, locale en-VN) • Flutter version 3.10.3 on channel stable at /Users/huynq/Documents/GitHub/flutter • Upstream repository https://github.com/flutter/flutter.git • Framework revision f92f44110e (3 days ago), 2023-06-01 18:17:33 -0500 • Engine revision 2a3401c9bb • Dart version 3.0.3 • DevTools version 2.23.1 [✓] Android toolchain - develop for Android devices (Android SDK version 32.0.0) • Android SDK at /Users/huynq/Library/Android/sdk • Platform android-33, build-tools 32.0.0 • ANDROID_HOME = /Users/huynq/Library/Android/sdk • Java binary at: /Applications/Android Studio.app/Contents/jbr/Contents/Home/bin/java • Java version OpenJDK Runtime Environment (build 17.0.6+0-17.0.6b802.4-9586694) • All Android licenses accepted. [✓] Xcode - develop for iOS and macOS (Xcode 14.3) • Xcode at /Applications/Xcode.app/Contents/Developer • Build 14E222b • CocoaPods version 1.11.3 [✓] Chrome - develop for the web • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome [✓] Android Studio (version 2022.2) • 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 17.0.6+0-17.0.6b802.4-9586694) [✓] VS Code (version 1.78.2) • VS Code at /Applications/Visual Studio Code.app/Contents • Flutter extension version 3.66.0 [✓] Connected device (2 available) • macOS (desktop) • macos • darwin-x64 • macOS 13.0.1 22A400 darwin-x64 • Chrome (web) • chrome • web-javascript • Google Chrome 114.0.5735.90 [✓] Network resources • All expected network resources are available. • No issues found! ``` ```bash [!] Flutter (Channel master, 3.11.0-18.0.pre.76, on macOS 13.0.1 22A400 darwin-x64, locale en-VN) • Flutter version 3.11.0-18.0.pre.76 on channel master at /Users/huynq/Documents/GitHub/flutter_master ! Warning: `flutter` on your path resolves to /Users/huynq/Documents/GitHub/flutter/bin/flutter, which is not inside your current Flutter SDK checkout at /Users/huynq/Documents/GitHub/flutter_master. Consider adding /Users/huynq/Documents/GitHub/flutter_master/bin to the front of your path. ! Warning: `dart` on your path resolves to /Users/huynq/Documents/GitHub/flutter/bin/dart, which is not inside your current Flutter SDK checkout at /Users/huynq/Documents/GitHub/flutter_master. Consider adding /Users/huynq/Documents/GitHub/flutter_master/bin to the front of your path. • Upstream repository https://github.com/flutter/flutter.git • Framework revision 0b7415356e (2 days ago), 2023-06-03 07:16:37 -0400 • Engine revision c838a1b059 • Dart version 3.1.0 (build 3.1.0-166.0.dev) • DevTools version 2.24.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 32.0.0) • Android SDK at /Users/huynq/Library/Android/sdk • Platform android-33, build-tools 32.0.0 • ANDROID_HOME = /Users/huynq/Library/Android/sdk • Java binary at: /Applications/Android Studio.app/Contents/jbr/Contents/Home/bin/java • Java version OpenJDK Runtime Environment (build 17.0.6+0-17.0.6b802.4-9586694) • All Android licenses accepted. [✓] Xcode - develop for iOS and macOS (Xcode 14.3) • Xcode at /Applications/Xcode.app/Contents/Developer • Build 14E222b • CocoaPods version 1.11.3 [✓] Chrome - develop for the web • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome [✓] Android Studio (version 2022.2) • 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 17.0.6+0-17.0.6b802.4-9586694) [✓] VS Code (version 1.78.2) • VS Code at /Applications/Visual Studio Code.app/Contents • Flutter extension version 3.66.0 [✓] Connected device (2 available) • macOS (desktop) • macos • darwin-x64 • macOS 13.0.1 22A400 darwin-x64 • Chrome (web) • chrome • web-javascript • Google Chrome 114.0.5735.90 [✓] Network resources • All expected network resources are available. ! Doctor found issues in 1 category. ```
jaxnz commented 11 months ago

Having this issue on the web on Safari. Flutter 3.10.6 - Have also tried using SelectionContainer.disabled which no result.