TextFormField not focused after enabling it

Question

I do not see a blinking cursor if I enable and focus a previous disabled TextFormField. In this example, the TextFormField is originally disabled, as indicated by the _enabled state variable, and when you click on the enable button, the field is enabled and focused but the blinking cursor is not visible. I have to click on the TextFormField in order to see the blinking cursor.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

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

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

class _MyHomePageState extends State<MyHomePage> {
  bool _enabled = false;
  FocusNode focusNodeA = FocusNode();

  @override
  Widget build(BuildContext context) {

    return Scaffold(
      appBar: AppBar(
        title: Text('Test'),
      ),
      body: TextFormField(
        enabled: _enabled,
        focusNode: focusNodeA,
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          setState(() => _enabled = true);
          FocusScope.of(context).requestFocus(focusNodeA);
        },
        child: Text('Enable'),
      ),
    );
  }
}

If I press 'Enable' twice, the cursor is shown.

If the TextFormField was already enabled and then focused, the blinking cursor is visible.

Majid Sadrayi · Accepted Answer · 2020-02-10T19:34:35.573

2

1- you focused after setState so it not working. just do like below 2- you can't focus widget until disabled and when you enabling widget. when you do focusing and enabling at same time in ui tread it's try focusing before enabling because of their rendering time.if you post some delay to focusing the problem get solving.

setState(() {
            Future.delayed(const Duration(milliseconds: 10), ()
            {
              FocusScope
                  .of(
                  context)
                  .requestFocus(
                  focusNodeA);
              print(FocusScope.of(context).focusedChild.toString());

            });
            _enabled = true;
          });

edited Feb 10 '20 at 19:34

answered Feb 10 '20 at 17:38

Majid Sadrayi

324
2
6

I found that a 10ms delay wasn't always enough. 100ms worked better. This works, but it'd better if the delay could be avoided. – user2233706 Feb 10 '20 at 20:22
Instead of delay use ```WidgetsBinding.instance.addPostFrameCallback();``` to run focus code; it is still not the best solution imho – Permutohedron Dec 16 '21 at 09:05

score 0 · Answer 2 · answered Jan 04 '23 at 10:56

Please try

setState(() {
                    enableEditText = true;
                    Future.delayed(const Duration(milliseconds: 500), () {
                      tfController.selection =
                          TextSelection.fromPosition(TextPosition(offset: tfController.text.length));
                      FocusScope.of(context).requestFocus(focusNode);
                    });
                  });

TextField(
            controller: tfController,
            decoration: null,
            textInputAction: TextInputAction.done,
            enabled: enableEditText,
            focusNode: focusNode,
           
          ),

TextFormField not focused after enabling it

2 Answers2

Linked