Focus cannot be kept on textfield in a ReorderableColumn

[ianspryn]

There are quite a few ways to cause the issue

1. requestFocus() on a TextField right after it is built that exists in a ReorderableColumn, then tap the submit in the keyboard to dismiss the keyboard and unfocus the text field. After doing this, tapping the text field will cause the keyboard to flash and immediately disappear, and the text field does not gain focus. However, tapping it at 2nd time will finally bring the keyboard up and give focus to the TextField.
2. Have two TextFields in one row, and set the first one with textInputAction: TextInputAction.next and onSubmitted: (_) => FocusScope.of(context).nextFocus(). Tapping the next button in the keyboard jumps the focus to the next TextField. Now, tap the submit button in the keyboard. At this point, the keyboard is dismissed and the TextField is no longer in focus. However, tapping either TextField in that row will never bring up the keyboard permanently and restore focus to the TextField. It can only be brought back by tapping a TextField in a separate row or a TextField outside of the ReorderableColumn, and then tapping the original TextField in interest.
3. Wrap your MaterialApp root widget in GestureDetector as follows:

   GestureDetector(
     onTap: () {
       WidgetsBinding.instance.focusManager.primaryFocus?.unfocus();
     },
     child: MaterialApp( ),
   );

   Using this GestureDetector allows a user to tap anywhere on the screen that is not a TextField or something similar and dismiss the keyboard and remove focus from the field. Now, like the 1st example, requestFocus() on a TextField right after it is built. After that, tap out of the TextField. No matter what text field you tap in the ReordableColumn, you cannot regain focus on a TextField unless you tap the field that you initially performed requestFocus() on or you tap a TextField that is outside of the ReorderableColumn.

Wrapping the content in a Column instead of a ReorderableColumn fixes all of the issues described above.

Attached is some sample code that demonstrates all of the described problems.

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

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () {
        WidgetsBinding.instance.focusManager.primaryFocus?.unfocus();
      },
      child: MaterialApp(
        title: 'BUG',
        theme: ThemeData(primarySwatch: Colors.cyan),
        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 one;

  @override
  void initState() {
    super.initState();
    one = FocusNode();
    WidgetsBinding.instance.addPostFrameCallback((_) {
      FocusScope.of(context).requestFocus(one);
    });
  }

  @override
  Widget build(BuildContext context) {
    return Material(
      child: Center(
        child: Container(
          width: 300,
          child: ReorderableColumn(
            onReorder: (_, __) {},
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              TextField(focusNode: one, key: UniqueKey(),),
              Row(
                key: UniqueKey(),
                children: <Widget>[
                  Container(
                    width: 140,
                    child: TextField(
                      textInputAction: TextInputAction.next,
                      onSubmitted: (_) {
                        FocusScope.of(context).nextFocus();
                      },
                    ),
                  ),
                  SizedBox(width: 15),
                  Container(width: 140, child: TextField()),
                ],
              ),
            ],
          ),
        ),
      ),
    );
  }
}

[seekcx]

Is there a solution to this problem?

[edsson-madrigal]

is there any workaround on this problem?

[Anders3byg]

This does not appear to be fixed yet. However if i switch to ReorderableWrap, it works, so something is wrong with the ReorderableColumn. Unfortunately Wrap don't work as nicely with my column layout, so hope there is a fix for the Column soon :-)

Hitting the same error with keyboard being dismissed when tapping a textField inside ReorderableColumn