TextField unfocuses when the soft keyboard appears-CodePudding

For some reason, when I press the TextField, it focuses for a split second and then unfocuses immediately as the soft keyboard comes up. I can still type and submit, but the labelText doesn't disappear like it's supposed to and most importantly, FocusManager.instance.primaryFocus?.unfocus() doesn't let the keyboard disappear.

Widget build(BuildContext context) {
    return Container(
      padding: const EdgeInsets.all(5),
      child: Row(
        children: [
          Expanded(
            child: Card(
              shape: RoundedRectangleBorder(
                borderRadius: BorderRadius.circular(100),
              ),
              child: Container(
                margin: const EdgeInsets.only(left: 10, bottom: 10, top: 10),
                child: TextField(
                  onTap: () => myFocusNode.requestFocus(),
                  decoration: const InputDecoration(
                    labelText: '  Enter task',
                    border: InputBorder.none,
                    floatingLabelBehavior: FloatingLabelBehavior.never,
                  ),
                  controller: textController,
                  focusNode: myFocusNode,
                  onSubmitted: (_) {
                    submit();
                    myFocusNode.requestFocus();
                    textController.clear();
                  },
                ),
              ),
            ),
          ),
          CircleAvatar(
            child: TextButton(
              onPressed: () {
                submit();
                myFocusNode.requestFocus();
                textController.clear();
              },
              child: const FittedBox(
                child: Text(
                  'Add',
                  style: TextStyle(
                    color: Colors.white,
                  ),
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }

I think this may be because the app is rebuilt when the soft keyboard shows up, but I'm not sure. What can I do to fix this?

CodePudding user response：

I think you need to remove this:

onTap: () => myFocusNode.requestFocus(),

If you need, you can control the focus action when filed si submitted with the textInputAction property:

// Go to next field
textInputAction: TextInputAction.next

// Go to previous field
textInputAction: TextInputAction.previous

// Don't move focus
textInputAction: TextInputAction.none

// Many other possible values, check the doc ...

UPDATE

When i try your build code on a MediaPad tablet, it work like a charm, here is my implementation:

import 'package:flutter/material.dart';

class DoorMeasure extends StatefulWidget {
  const DoorMeasure({Key? key}) : super(key: key);

  @override
  State<DoorMeasure> createState() => _DoorMeasureState();
}

class _DoorMeasureState extends State<DoorMeasure> {
  var myFocusNode;
  var textController = TextEditingController()..text = '';

  @override
  void initState() {
    myFocusNode = new FocusNode();
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: const EdgeInsets.all(5),
      child: Row(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Expanded(
            child: Card(
              shape: RoundedRectangleBorder(
                borderRadius: BorderRadius.circular(100),
              ),
              child: Container(
                margin: const EdgeInsets.only(left: 10, bottom: 10, top: 10),
                child: TextField(
                  onTap: () => myFocusNode.requestFocus(),
                  decoration: const InputDecoration(
                    labelText: '  Enter task',
                    border: InputBorder.none,
                    floatingLabelBehavior: FloatingLabelBehavior.never,
                  ),
                  controller: textController,
                  focusNode: myFocusNode,
                  onSubmitted: (_) {
                    myFocusNode.requestFocus();
                    textController.clear();
                  },
                ),
              ),
            ),
          ),
          CircleAvatar(
            child: TextButton(
              onPressed: () {
                myFocusNode.requestFocus();
                textController.clear();
              },
              child: const FittedBox(
                child: Text(
                  'Add',
                  style: TextStyle(
                    color: Colors.white,
                  ),
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }
}