16

For some reason, I cannot focus on a TextField after on the next page after navigating. The keyboard would automatically dismiss when the TextField is selected. If I set autofocus: true on the TextField, then the keyboard will infinitely popup and immediately dismiss over and over again.

I encountered this when my app was a reasonable size but I was able to recreate this in a minimal example app.

I am using Dart 2.0.0-dev.55.0 with Flutter beta v0.3.2.

Code for main page:

import 'package:flutter/material.dart';
import 'settings.dart';

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

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

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);
  final String title;
  @override
  _MyHomePageState createState() => new _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text('Helpful text.',),
            // ===== Where navigation happens =====
            RaisedButton(
              onPressed: () {
                Navigator.push(context, PageRouteBuilder(
                  pageBuilder: (_, __, ___) => SettingsPage()));
              },
              child: Text('Go to input page'),
            ),
          ],
        ),
      ),
    );
  }
}

Here is the code for the page with the TextField.

import 'package:flutter/material.dart';

class SettingsPage extends StatefulWidget {
  SettingsPage({Key key}) :
   super(key: key);

  @override
  _SettingsPage createState() => new _SettingsPage();
}


class _SettingsPage extends State<SettingsPage> {

  @override
  Widget build(BuildContext context) {
    final key = GlobalKey<ScaffoldState>();
    return Scaffold(
      key: key,
      backgroundColor: Colors.white,
      appBar: AppBar(
        title: Text("Settings"),
      ),
      body: ListView(
        children: <Widget>[
          Text("Enter something"),
          // Can't focus on this widget
          TextField(),
        ],
      ),
    );
  }
}

I can focus fine on TextField on the main page if I put one there, but can't on the one in the Settings page. I assume it has something to do with the keyboard not taking priority over the popped up page? Or what is going on? How I can get the app to just focus on input fields on a navigated page?

Pybanana
  • 351
  • 1
  • 2
  • 6
  • I guess the problem is that it is inside a `ListView`. Can you try to move it out. I run into this recently myself. I assume it's a bug, but might be missing knowledge on my side as well. https://github.com/flutter/flutter/issues/10498 – Günter Zöchbauer May 25 '18 at 19:12
  • @GünterZöchbauer I changed the body to just `body: TextField(),` in the Settings page and I still cannot focus on it. Same thing happens if I change `ListView` into a `Column`. I'm going to look more into the issue you linked but so far looks like the bug is still is alive sadly. – Pybanana May 25 '18 at 19:27
  • If it's not that, I don't know. – Günter Zöchbauer May 25 '18 at 19:34

7 Answers7

9

So the problem comes from the fact that I am supplying the GlobalKey to the Scaffold. Removing the key solves the issue. Not exactly sure why but the issue is mostly explained in this Github issue.

I was using the key to have snackbar popup when showing an error message when validating the input but now I'm opting to just display the error message in a Text widget.

Pybanana
  • 351
  • 1
  • 2
  • 6
  • The issue was that you created the global key inside the build method. Try moving the Global key initialisation outside the build method and everything works fine :) – Rohit TP Jun 28 '20 at 14:50
4

To solve this problem, Use code like this.

// Class private property
static final GlobalKey<FormFieldState<String>> _searchFormKey = GlobalKey<FormFieldState<String>>()

// Inside widget
TextFormField(
  key: _searchFormKey, // Use searchFormKey here like this
  decoration: InputDecoration(
    border: OutlineInputBorder(),
    labelText: 'Type here...',
  )
)
Sateesh
  • 1,327
  • 9
  • 12
  • 2
    Why down vote? Using this solution your keyboard will be stable. On focus it will not pop in and pop out. Its working pretty well with stateful widget – Sateesh Dec 04 '19 at 10:50
3

in my case, autofocus:true doesn't work only on iOS simulator, but it will work in real device both for Android and iOS

Alexa289
  • 8,089
  • 10
  • 74
  • 178
2

Was having a similar issue with global key. Was looking through a similar example in flutter's architecture redux example.

Using the key like so fixed it for me

static final GlobalKey<FormFieldState<String>> _orderFormKey = GlobalKey<FormFieldState<String>>();
ashkan117
  • 868
  • 10
  • 16
  • Please remove the "If anyone understands...". If you are interested in the cause of a certain behaviour don't post this in an answer as this is not a forum. Instead open a new question for it. – geisterfurz007 Jun 26 '18 at 09:02
1

Just add autofocus as true, this will open keyboard when navigating to new screen

 TextField(
            autofocus: true,
          ),
Jitesh Mohite
  • 31,138
  • 12
  • 157
  • 147
0

I also had this issue with a focus node added to the textfield. Removing the focus node solved my issue.

Brett Young
  • 168
  • 2
  • 8
0

Not sure what your issue is since I can't reproduce it any more. I just tried your code in Flutter Channel beta, 1.18.0-11.1.pre and everything worked as it should without modifying your original code.

It looks more as if it was Flutter's bug rather.

Tomas Baran
  • 1,570
  • 2
  • 20
  • 37