Flutter: Tab key not working properly in flutter desktop when screen not maximised

Question

Im developing for flutter desktop and am having issues as pressing the tab key doesnt cycle through the text fields when the app screen is not maximised.

I have 8 Textfields arranged in a Gridview and when the app screen is maximised the tab key moves through the fields as expected, left to right then down. When I reduce the screen size the tab key only cycles 2 fields in a continuous loop. How can I get this working properly? Code as shown:

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(

      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {

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

class _MyHomePageState extends State<MyHomePage> {

    @override
  Widget build(BuildContext context) {

    return Scaffold(
      appBar: AppBar(
        // Here we take the value from the MyHomePage object that was created by
        // the App.build method, and use it to set our appbar title.
        title: Text("Test App"),
      ),
      body: Center(
        // Center is a layout widget. It takes a single child and positions it
        // in the middle of the parent.
        child:Container(
      height: 180,
      // width: MediaQuery.of(context).size.width * 0.9,
      child: GridView.count(
      scrollDirection: Axis.vertical,
      crossAxisCount: 4,
      childAspectRatio: 5,
      children:  [
      buildColumn(context,txt: "A"),
        buildColumn(context,txt: "B"),
        buildColumn(context,txt: "C"),
        buildColumn(context,txt: "D"),
        buildColumn(context,txt: "E"),
        buildColumn(context,txt: "F"),
        buildColumn(context,txt: "G"),
        buildColumn(context,txt: "H"),
      ])
    )
      )
    );
  }

    Column buildColumn(BuildContext context,{txt}) {
      return Column(children: [
    Text(txt),
    Container(
    height: MediaQuery.of(context).size.height * 0.04,
    width: 300,
    child:TextFormField(decoration: InputDecoration(
      enabledBorder: OutlineInputBorder(
        borderSide: BorderSide(
            color: Colors.black12, width: 1.0),
      ),),)
    ),
        ]
  );
    }
}

Solution

Looks like a bug, but it can be fixed by adding focusedBorder (either removing enabledBorder):

        child: TextFormField(
          decoration: InputDecoration(
            enabledBorder: OutlineInputBorder(
                borderSide: BorderSide(color: Colors.black12, width: 1.0)),
            focusedBorder: OutlineInputBorder(
                borderSide: BorderSide(color: Colors.green, width: 1.0)),
          ),
        ),

Comments

[West]

Thanks yes I believe its a bug. I tried your answer and it only works well if I completely remove enabledBorder & focusedBorder. With both, or just the focused border, it seems to work when its just Textfields but when I change one of the Textfields, for example G to a dropdown button the tab order gets messed up again