Focus on DartPad behaves differently than when running Flutter app in Chrome

[orestesgaolin]

What happened?

Focus in DartPad behaves differently than when running Flutter app in Chrome browser. It doesn't react to [Tab] presses as it's expected in typical application but goes outside of the Flutter iframe.

Steps to reproduce problem

Run the following sample with two form fields.

Then put the cursor in the 1st TextFormField and press [Tab]. The focus goes outside of the Flutter window to the Chrome's top bar.

When running the same sample in Chrome from VS Code, the focus traverses to the 2nd TextFormField.

Additional info

Browser

Browser: Chrome 93.0.4577.82

Machine

Operating system: macOS Big Sur

Your code

What code was in the editor, if any, when the failure occurred? You can paste it in below:

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Focus',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(),
    );
  }
}

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

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

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: ConstrainedBox(
          constraints: const BoxConstraints(maxWidth: 400),
          child: Column(
            children: [
              TextFormField(),
              TextFormField(),
            ],
          ),
        ),
      ),
    );
  }
}

[RedBrogdon]

Thanks for filing an issue, @orestesgaolin. I've been able to reproduce the behavior locally.

We've got an open issue for some other, possibly related, focus-related weirdness at #1963. I'll see if I can get some traction on this from engineering.