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
164.96k stars 27.18k forks source link

TextField doesn't loose focus on Android #30954

Closed fralways closed 9 months ago

fralways commented 5 years ago

When using Android simulator Nexus5X API 27 tapping on ('Android') button to dismiss keyboard doesn't remove focus from TextField thus preventing layout update after keyboard is dismissed. I have not found other way to listen for keyboard dismiss, and would expect that this is the correct way to do it. I guess this is an issue for all devices which have button to dismiss keyboard.

Steps to Reproduce

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  FocusNode _focusNode = FocusNode();

  @override
  void initState() {
    super.initState();

    _focusNode.addListener(() {
      print('Something happened');
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: TextField(
          focusNode: _focusNode,
          autofocus: true,
        ),
      ),
    );
  }
}

Logs

Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel beta, v1.3.8, on Mac OS X 10.14.3 18D109, locale en-US)
[✓] Android toolchain - develop for Android devices (Android SDK version 28.0.3)
[✓] iOS toolchain - develop for iOS devices (Xcode 10.2)
[✓] Android Studio (version 3.3)
[!] IntelliJ IDEA Ultimate Edition (version 2018.1.2)
    ✗ Flutter plugin not installed; this adds Flutter specific functionality.
    ✗ Dart plugin not installed; this adds Dart specific functionality.
[✓] Connected device (3 available)

! Doctor found issues in 1 category.
justinmc commented 5 years ago

Using your code, I see that the FocusNode listener is not called when clicking the Android "down arrow" button to dismiss the keyboard, but it is called when clicking the checkmark in the keyboard. I'll try to figure out what the desired behavior is.

Besides the event, I think that visually keeping the cursor in the input after dismissing the keyboard is desired, though. I see the same behavior in native Android.

fralways commented 5 years ago

If keeping the cursor in the input in that case is desired then it explains why focus node doesn't push new event after keyboard dismiss and why this approach doesn't handle all use cases. Then I would need some other way to listen for keyboard change and I do not know any other listener for that. Something like UIKeyboardWillShowNotification and UIKeyboardWillHideNotification in iOS. Am I missing something? I would suggest to either expand listener for focus node so that we can listen for keyboard change events as well or to have some completely different listener for keyboard change events.

justinmc commented 5 years ago

@gspencergoog This is the focus issue I mentioned to you. Will your work affect this at all?

gspencergoog commented 5 years ago

No, this won't be affected by my work. I don't know of a way to listen for the keyboard show/hide events at the moment, but that would be a good addition, especially since the platform can hide the keyboard independent of losing focus.

darshankawar commented 4 years ago

In latest stable (1.20.2) using given code sample, tapping on down arrow key keeps the cursor focused in textfield, while tapping on Done on keyboard removes the cursor focused. Tested on Android 8.1.0 device.

danielleiszen commented 3 years ago

I have the same issue on Android. I show an overlay with a complex widget of search results for a search field. I would like to hide the overlay when the user dismisses the keyboard, however it can only be closed using the check icon on the keyboard. I have other controls on the page (slider) but those does not seem to grab the focus when used so I am stuck with an always open search box. Is there a workaround or any suggestion that I could implement? Thanks for the help.

maheshj01 commented 1 year ago

I can reproduce the issue on the latest stable and the master channel, On tapping the Android back button the cursor still stays inside the TextField but on submitting (click the check icon on the keyboard) the TextField loses focus completely (cursor disappears). I verified the behavior in a few other apps like Instagram and youtube, Both seem to have the cursor on pressing the back button. While Whatsapp, does remove the cursor on pressing the back button, So Perhaps being able to configure this behavior would be ideal.

Youtube Instagram Flutter
flutter doctor -v (mac) ``` [✓] Flutter (Channel master, 3.6.0-6.0.pre.33, on macOS 12.6 21G115 darwin-arm64, locale en-IN) • Flutter version 3.6.0-6.0.pre.33 on channel master at • Upstream repository https://github.com/flutter/flutter.git • Framework revision a9858ec524 (72 minutes ago), 2022-11-21 10:58:11 -0500 • Engine revision 46a6b54295 • Dart version 2.19.0 (build 2.19.0-406.0.dev) • DevTools version 2.19.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-rc4) • Android SDK at /Users/mahesh/Library/Android/sdk • Platform android-33, build-tools 33.0.0-rc4 • ANDROID_HOME = /Users/mahesh/Library/Android/sdk • Java binary at: /Applications/Android Studio.app/Contents/jre/Contents/Home/bin/java • Java version OpenJDK Runtime Environment (build 11.0.12+0-b1504.28-7817840) • All Android licenses accepted. [✓] Xcode - develop for iOS and macOS (Xcode 14.0.1) • Xcode at /Applications/Xcode.app/Contents/Developer • Build 14A400 • CocoaPods version 1.11.3 [✓] Chrome - develop for the web • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome [✓] Android Studio (version 2021.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 11.0.12+0-b1504.28-7817840) [✓] IntelliJ IDEA Community Edition (version 2021.2.1) • IntelliJ at /Applications/IntelliJ IDEA CE.app • Flutter plugin version 61.2.4 • Dart plugin version 212.5080.8 [✓] VS Code (version 1.70.2) • VS Code at /Applications/Visual Studio Code.app/Contents • Flutter extension version 3.53.20221101 [✓] Connected device (3 available) • iPhone 12 Pro (mobile) • 026D5789-9E78-4AD5-B1B2-3F8D4E7F65E4 • ios • com.apple.CoreSimulator.SimRuntime.iOS-14-5 (simulator) • macOS (desktop) • macos • darwin-arm64 • macOS 12.6 21G115 darwin-arm64 • Chrome (web) • chrome • web-javascript • Google Chrome 107.0.5304.110 [✓] HTTP Host Availability • All required HTTP hosts are available • No issues found! ``` ``` [✓] Flutter (Channel stable, 3.3.9, on macOS 12.6 21G115 darwin-arm, locale en-IN) • Flutter version 3.3.9 on channel stable at /Users/mahesh/Development/flutter • Upstream repository https://github.com/flutter/flutter.git • Framework revision b8f7f1f986 (24 hours 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-rc4) • Android SDK at /Users/mahesh/Library/Android/sdk • Platform android-33, build-tools 33.0.0-rc4 • ANDROID_HOME = /Users/mahesh/Library/Android/sdk • Java binary at: /Applications/Android Studio.app/Contents/jre/Contents/Home/bin/java • Java version OpenJDK Runtime Environment (build 11.0.12+0-b1504.28-7817840) • All Android licenses accepted. [✓] Xcode - develop for iOS and macOS (Xcode 14.0.1) • Xcode at /Applications/Xcode.app/Contents/Developer • Build 14A400 • CocoaPods version 1.11.3 [✓] Chrome - develop for the web • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome [✓] Android Studio (version 2021.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 11.0.12+0-b1504.28-7817840) [✓] IntelliJ IDEA Community Edition (version 2021.2.1) • IntelliJ at /Applications/IntelliJ IDEA CE.app • Flutter plugin version 61.2.4 • Dart plugin version 212.5080.8 [✓] VS Code (version 1.70.2) • VS Code at /Applications/Visual Studio Code.app/Contents • Flutter extension version 3.53.20221101 [✓] Connected device (3 available) • iPhone 12 Pro (mobile) • 026D5789-9E78-4AD5-B1B2-3F8D4E7F65E4 • ios • com.apple.CoreSimulator.SimRuntime.iOS-14-5 (simulator) • macOS (desktop) • macos • darwin-arm64 • macOS 12.6 21G115 darwin-arm • Chrome (web) • chrome • web-javascript • Google Chrome 107.0.5304.110 [✓] HTTP Host Availability • All required HTTP hosts are available • No issues found! ```
LongCatIsLooong commented 10 months ago

You could use MediaQuery.viewInsets for keyboard visibility

github-actions[bot] commented 9 months ago

Without additional information, we are unfortunately not sure how to resolve this issue. We are therefore reluctantly going to close this bug for now. If you find this problem please file a new issue with the same description, what happens, logs and the output of 'flutter doctor -v'. All system setups can be slightly different so it's always better to open new issues and reference the related ones. Thanks for your contribution.

github-actions[bot] commented 9 months ago

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.