Flutter web shows different focus behavior on Android and iOS

37 views Asked by At

Below is a simple Flutter application containing basically a Row with

  • a TextField
  • an ElevatedButton (wrapped in a TextFieldTapRegion)

When selecting the TextField, I see a blinking cursor and an enabled border. (OK)

However, I observe some differences when clicking the button:

  • on pc (Chrome) and Android (Chrome): clicking the button does not impact the focused state of the TextField (as expected given the TextFieldTapRegion)
  • on iOS (both Safari and Chrome): clicking the button removes the focus of the TextField

Any ideas why this happens?

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});
  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {

  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(widget.title),
      ),
      body: Row(
        children: <Widget>[
          Expanded(
            child: MyInputField(),
          ),
          Expanded(
            child: TextFieldTapRegion(
              child: ElevatedButton(
                onPressed: () {},
                child: Text("A button"),
              ),
            ),
          ),
        ],
      ),
    );
  }
}


class MyInputField extends StatelessWidget {
  final TextEditingController controller = TextEditingController();

  FocusNode focusNode = FocusNode();

  MyInputField({Key? key}) : super(key: key) {
    focusNode.requestFocus();
  }
  
  @override
  Widget build(BuildContext context) {
    return Focus(
      autofocus: true,
      child: TextField(
        controller: controller,
        textAlign: TextAlign.center,
        autofocus: true,
        textInputAction: TextInputAction.none,
        showCursor: true,
        enabled: true,
        focusNode: focusNode,
        keyboardType:TextInputType.none, //no system keyboard
      ),
    );
  }
}
0

There are 0 answers