When popping a route, controls should reacquire focus without opening the keyboard or scrolling to make visible.

[vijayaragavangkf]

I have number of pages and all of them are kind of forms with some TextFields.

In each page, I am entering some data in TextField and then moving to the next page either by clicking next button directly (Key Board is Visible) or by clicking back button to dismiss keyboard then clicking next button. After the next page, When I trying to go to previous page by back button or Navigator.pop that TextField getting auto focused. This behaviour is really annoying lot.

I verified that in my older version app (Which uses older Flutter SDK) works fine.

Sample code to reproduce:

import 'package:flutter/material.dart';

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

class MainPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: FirstPage(),
    );
  }
}

class FirstPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    double height = MediaQuery.of(context).size.height;
    return Scaffold(
      appBar: AppBar(
        title: Text("First Page"),
      ),
      body: SingleChildScrollView(
        child: Column(
          children: <Widget>[
            TextField(),
            Text("Use back button to dismiss keyboar"),
            Text("Scroll down to see next button"),
            SizedBox(
              height: height + 100,
              child: Center(child: Text("Some widgets")),
            ),
            RaisedButton(
              child: Text("Click Here"),
              onPressed: () {
                Navigator.push(
                  context,
                  MaterialPageRoute(
                    builder: (context) => SecondPage(),
                  ),
                );
              },
            )
          ],
        ),
      ),
    );
  }
}

class SecondPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Second Page"),
      ),
      body: Column(
        children: <Widget>[
          TextField(),
          RaisedButton(
            child: Text("Go Back"),
            onPressed: () {
              Navigator.pop(context);
            },
          )
        ],
      ),
    );
  }
}

Flutter Doctor:

[√] Flutter (Channel stable, v1.12.13+hotfix.5, on Microsoft Windows [Version 10.0.18362.535], locale en-IN)
    • Flutter version 1.12.13+hotfix.5 at D:\Installed\FlutterSDK
    • Framework revision 27321ebbad (4 weeks ago), 2019-12-10 18:15:01 -0800
    • Engine revision 2994f7e1e6
    • Dart version 2.7.0


[√] Android toolchain - develop for Android devices (Android SDK version 28.0.3)
    • Android SDK at C:\Users\Flower\AppData\Local\Android\sdk
    • Android NDK location not configured (optional; useful for native profiling support)
    • Platform android-29, build-tools 28.0.3
    • Java binary at: C:\Program Files\Android\Android Studio\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 C:\Program Files\Android\Android Studio
    • Flutter plugin version 42.1.1
    • Dart plugin version 191.8593
    • Java version OpenJDK Runtime Environment (build 1.8.0_202-release-1483-b03)

[√] Connected device (1 available)
    • KOB L09 • VAF4T18531000189 • android-arm64 • Android 7.0 (API 24)

• No issues found!

[HansMuller]

CC @gspencergoog

[gspencergoog]

This is "as designed", since otherwise we would be losing the previously focused widget when we return to a route.

If you want it to lose the focus so that this doesn't happen, then just unfocus the currently focused widget before you push the route:

class FirstPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    double height = MediaQuery.of(context).size.height;
    return Scaffold(
      appBar: AppBar(
        title: Text("First Page"),
      ),
      body: SingleChildScrollView(
        child: Column(
          children: <Widget>[
            TextField(),
            Text("Use back button to dismiss keyboard"),
            Text("Scroll down to see next button"),
            SizedBox(
              height: height + 100,
              child: Center(child: Text("Some widgets")),
            ),
            RaisedButton(
              child: Text("Click Here"),
              onPressed: () {

                // Tells any currently focused widget to unfocus, so that it won't scroll when
                // returning to this page.
                FocusManager.instance.primaryFocus.unfocus();

                Navigator.push(
                  context,
                  MaterialPageRoute(
                    builder: (context) => SecondPage(),
                  ),
                );
              },
            )
          ],
        ),
      ),
    );
  }
}

[vijayaragavangkf]

@gspencergoog Please run the code on device or emulator where the in-build keyboard(virtual keyboard) is enabled. By default keyboard is disable in IOS Simulator.. I am getting this issue in Android Device and Emulator. I am not sure about IOS.

And yes we need to get previously focused widget when we return to a route. Showing cursor in the previously focused TextField is good. But the main problem is keyboard is popping up.

On going to next page, I am dismissing keyboard by pressing back button(the cursor is still blinking on TextField). So why when we return to a route the keyboard state is not persisted. And in my example I am scrolling down to get to the next button. Why the scroll state is not persisted.

If it is still "as designed",
In Native Android this is not the case(not sure about swift). Then why flutter is different.

[gspencergoog]

The scroll state is persisted, but when you go back, it restores the focus to the text field, which causes it to scroll into view. Notice that if you unfocus the text field before pushing (as in my example), then when you go back, the scroll state is unchanged.

If I understand you correctly, what you want is (only when popping a route) focus the text field without bringing up a keyboard, and without scrolling it into view.

Can you give a concrete example of an Android app doing this? I mean, it's probably possible to find, but I've tried a few apps now, and none of the do what you describe: they all either bring up the keyboard again when I go back to the page that had a text field focused, even if I manually put away the keyboard, or the control is unfocused when I go back to them. See the gif below:

[vijayaragavangkf]

@gspencergoog Thank you.

1. Gmail - Compose (you can try it on Subject or Compose email Fields too)
2. Calendar - New Event
3. WhatApp - Change Number

I am unable to screen record in Netflix android app. You can go to sign in page, then enter username and then password and then navigate to Help page and then navigate back. you can see password field still has focus, but the keyboard not popping.

I am not requesting new feature. It worked fine on older app that build with older Flutter SDK but in latest Flutter SDK(Flutter version 1.12.13+hotfix.5) looks kind of buggy.

[vijayaragavangkf]

Demo Native Project. This is a simple native android project with two page with EditText.

[gspencergoog]

OK, we'll see what we can do to figure out a way to do this.

This may be architecturally difficult with Flutter, so it may take a while, but we'll get to it. Thanks for your examples.

[gspencergoog]

FYI the cause of the regression is enabling focus upon popping a route. Before that change, popping a route didn't automatically cause controls to re-acquire the focus at all.

[davidmartos96]

I have also started experiencing this issue after using v1.9.1 for a long time and now update to 1.12.
I have found a workaround that works fine for my use case, I don't know if there could be unwanted behaviors with this though: @vijayaragavangkf

MaterialApp(
    ...
    navigatorObservers: [ClearFocusOnPush()],
    ...
)


class ClearFocusOnPush extends NavigatorObserver {
  @override
  void didPush(Route route, Route previousRoute) {
    super.didPush(route, previousRoute);
    final focus = FocusManager.instance.primaryFocus;
    focus?.unfocus();
  }
}

I would also like to see a fix for this issue implemented at some point

[vijayaragavangkf]

@davidmartos96 Your solution is good to solve the annoying keyboard popup when popping a route. But the previous focus will be lost. This is also an unexpected behavior. I only don't want the keyboard popup, while still persisting previous focus.

[vijayaragavangkf]

MaterialApp(
    ...
    navigatorObservers: [ClearFocusOnPop ()],
    ...
)

class ClearFocusOnPop extends NavigatorObserver {
  @override
  void didPop(Route route, Route previousRoute) {
    super.didPop(route, previousRoute);
    WidgetsBinding.instance.addPostFrameCallback((_) async{
      await Future.delayed(Duration.zero);
      SystemChannels.textInput.invokeMethod('TextInput.hide');
    });
  }
}

This will solve the problem. But not sure this an efficient way to do so.

[sanekyy]

faced with the same problem. waiting for fix

[galves93]

I facing a problem with the screen that scroll when focus node change to another input, anyone here already face the problem or something similar?

when the first input is submitted, the focus goes to the field named "Quantidade", and the screen scrolls down ... thank guys

[TahaTesser]

This doesn't to bedesktop related
Looks like this is debatable if this is working as intended or a bug, nevertheless I can reproduce

code sample

import 'package:flutter/material.dart';

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

class MainPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: FirstPage(),
    );
  }
}

class FirstPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    double height = MediaQuery.of(context).size.height;
    return Scaffold(
      appBar: AppBar(
        title: Text("First Page"),
      ),
      body: SingleChildScrollView(
        child: Column(
          children: <Widget>[
            TextField(),
            Text("Use back button to dismiss keyboar"),
            Text("Scroll down to see next button"),
            SizedBox(
              height: height + 100,
              child: Center(child: Text("Some widgets")),
            ),
            RaisedButton(
              child: Text("Click Here"),
              onPressed: () {
                Navigator.push(
                  context,
                  MaterialPageRoute(
                    builder: (context) => SecondPage(),
                  ),
                );
              },
            )
          ],
        ),
      ),
    );
  }
}

class SecondPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Second Page"),
      ),
      body: Column(
        children: <Widget>[
          TextField(),
          RaisedButton(
            child: Text("Go Back"),
            onPressed: () {
              Navigator.pop(context);
            },
          )
        ],
      ),
    );
  }
}

flutter doctor -v

[✓] Flutter (Channel master, 1.22.0-10.0.pre.358, on Mac OS X 10.15.6 19G2021
    x86_64, locale en-GB)
    • Flutter version 1.22.0-10.0.pre.358 at
      /Users/tahatesser/Code/flutter_master
    • Framework revision 4898a42b0a (2 hours ago), 2020-09-25 05:42:04 -0400
    • Engine revision 62b5a53b10
    • Dart version 2.11.0 (build 2.11.0-161.0.dev)

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

[✓] Xcode - develop for iOS and macOS (Xcode 12.0.1)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Xcode 12.0.1, Build version 12A7300
    • 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 version 49.0.2
    • Dart plugin version 193.7547
    • Java version OpenJDK Runtime Environment (build
      1.8.0_242-release-1644-b3-6222593)

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

[✓] Connected device (4 available)
    • RMX2001 (mobile) • EUYTFEUSQSRGDA6D • android-arm64  • Android 10 (API 29)
    • macOS (desktop)  • macos            • darwin-x64     • Mac OS X 10.15.6
      19G2021 x86_64
    • Web Server (web) • web-server       • web-javascript • Flutter Tools
    • Chrome (web)     • chrome           • web-javascript • Google Chrome
      85.0.4183.121

• No issues found!

[rh-id]

Hi, same issue on version 1.22.5. also waiting for fix

[febg11]

navigatorObservers: [ClearFocusOnPush()],

Thanks @davidmartos96, worked perfectly.

[Asquare17]

Hi
Please is there any solution to this problem yet

[3crazyspecial]

My page has a lot of operations to use pushPage to the next page, and I expect that if the input field is focused when the pushPage to a new page comes back when the keyboard won't be focused

if i use the code

FocusManager.instance.primaryFocus?.unfocus();

when I back page, the keyboard can not be used

How to deal with it better

[3crazyspecial]

@gspencergoog Thank you.

1. Gmail - Compose (you can try it on Subject or Compose email Fields too)
2. Calendar - New Event
3. WhatApp - Change Number

I am unable to screen record in Netflix android app. You can go to sign in page, then enter username and then password and then navigate to Help page and then navigate back. you can see password field still has focus, but the keyboard not popping.

I am not requesting new feature. It worked fine on older app that build with older Flutter SDK but in latest Flutter SDK(Flutter version 1.12.13+hotfix.5) looks kind of buggy.

Same question

[jgat2012]

I am also facing the same issue.

[phankietit]

Same issue, auto focus cannot working for this case :(((

[belabiedredouane]

@davidmartos96 great solution, thank you

[dam-ease]

Reproducible on the latest master and stable channels.

Code Sample

import 'package:flutter/material.dart';

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

class MainPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: FirstPage(),
    );
  }
}

class FirstPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    double height = MediaQuery.of(context).size.height;
    return Scaffold(
      appBar: AppBar(
        title: Text("First Page"),
      ),
      body: SingleChildScrollView(
        child: Column(
          children: <Widget>[
            TextField(),
            Text("Use back button to dismiss keyboar"),
            Text("Scroll down to see next button"),
            SizedBox(
              height: height + 100,
              child: Center(child: Text("Some widgets")),
            ),
            TextButton(
              child: Text("Click Here"),
              onPressed: () {
                Navigator.push(
                  context,
                  MaterialPageRoute(
                    builder: (context) => SecondPage(),
                  ),
                );
              },
            )
          ],
        ),
      ),
    );
  }
}

class SecondPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Second Page"),
      ),
      body: Column(
        children: <Widget>[
          TextField(),
          TextButton(
            child: Text("Go Back"),
            onPressed: () {
              Navigator.pop(context);
            },
          )
        ],
      ),
    );
  }
}

Screen Record

3.webm

stable, master flutter doctor -v

[!] Flutter (Channel stable, 3.19.0, on macOS 14.2.1 23C71 darwin-arm64, locale
    en-NG)
    • Flutter version 3.19.0 on channel stable at
      /Users/damilolaalimi/sdks/flutter
    ! Warning: `dart` on your path resolves to
      /opt/homebrew/Cellar/dart/3.1.5/libexec/bin/dart, which is not inside your
      current Flutter SDK checkout at /Users/damilolaalimi/sdks/flutter.
      Consider adding /Users/damilolaalimi/sdks/flutter/bin to the front of your
      path.
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision bae5e49bc2 (2 days ago), 2024-02-13 17:46:18 -0800
    • Engine revision 04817c99c9
    • Dart version 3.3.0
    • DevTools version 2.31.1
    • 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 34.0.0)
    • Android SDK at /Users/damilolaalimi/Library/Android/sdk
    • Platform android-34, build-tools 34.0.0
    • ANDROID_HOME = /Users/damilolaalimi/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 15.2)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Build 15C500b
    • CocoaPods version 1.14.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)

[!] Android Studio (version unknown)
    • Android Studio at /Users/damilolaalimi/Downloads/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 determine Android Studio version.
    • Java version OpenJDK Runtime Environment (build
      17.0.7+0-17.0.7b1000.6-10550314)

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

[✓] VS Code (version 1.83.1)
    • VS Code at /Users/damilolaalimi/Downloads/Visual Studio Code.app/Contents
    • Flutter extension version 3.78.0

[✓] Connected device (5 available)
    • sdk gphone64 arm64 (mobile) • emulator-5554                        •
      android-arm64  • Android 14 (API 34) (emulator)
    • Damilola’s iPhone (mobile)  • 00008110-001964480AE1801E            • ios
      • iOS 17.1.1 21B91
    • iPhone 15 (mobile)          • DBCC5388-DA57-470E-8F0E-477EA0AA3C3A • ios
      • com.apple.CoreSimulator.SimRuntime.iOS-17-2 (simulator)
    • macOS (desktop)             • macos                                •
      darwin-arm64   • macOS 14.2.1 23C71 darwin-arm64
    • Chrome (web)                • chrome                               •
      web-javascript • Google Chrome 121.0.6167.184

[✓] Network resources
    • All expected network resources are available.

! Doctor found issues in 2 categories.

[!] Flutter (Channel master, 3.20.0-7.0.pre.83, on macOS 14.2.1 23C71 darwin-arm64, locale en-NG)
    • Flutter version 3.20.0-7.0.pre.83 on channel master at /Users/damilolaalimi/fvm/versions/master
    ! Warning: `dart` on your path resolves to /opt/homebrew/Cellar/dart/3.1.5/libexec/bin/dart, which is not inside your current Flutter SDK checkout at /Users/damilolaalimi/fvm/versions/master. Consider adding /Users/damilolaalimi/fvm/versions/master/bin to the front of your path.
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 6ee7e24bfe (3 hours ago), 2024-02-16 00:51:06 -0500
    • Engine revision dd530f1556
    • Dart version 3.4.0 (build 3.4.0-148.0.dev)
    • DevTools version 2.33.0-dev.6
    • 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 34.0.0)
    • Android SDK at /Users/damilolaalimi/Library/Android/sdk
    • Platform android-34, build-tools 34.0.0
    • ANDROID_HOME = /Users/damilolaalimi/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 15.2)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Build 15C500b
    • CocoaPods version 1.14.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)

[!] Android Studio (version unknown)
    • Android Studio at /Users/damilolaalimi/Downloads/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 determine Android Studio version.
    • Java version OpenJDK Runtime Environment (build 17.0.7+0-17.0.7b1000.6-10550314)

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

[✓] VS Code (version 1.83.1)
    • VS Code at /Users/damilolaalimi/Downloads/Visual Studio Code.app/Contents
    • Flutter extension version 3.78.0

[✓] Connected device (6 available)
    • sdk gphone64 arm64 (mobile)     • emulator-5554                        • android-arm64  • Android 14 (API 34) (emulator)
    • Damilola’s iPhone (mobile)      • 00008110-001964480AE1801E            • ios            • iOS 17.1.1 21B91
    • iPhone 15 (mobile)              • DBCC5388-DA57-470E-8F0E-477EA0AA3C3A • ios            • com.apple.CoreSimulator.SimRuntime.iOS-17-2 (simulator)
    • macOS (desktop)                 • macos                                • darwin-arm64   • macOS 14.2.1 23C71 darwin-arm64
    • Mac Designed for iPad (desktop) • mac-designed-for-ipad                • darwin         • macOS 14.2.1 23C71 darwin-arm64
    • Chrome (web)                    • chrome                               • web-javascript • Google Chrome 121.0.6167.184

[✓] Network resources
    • All expected network resources are available.

! Doctor found issues in 2 categories.