Autofocus not granted in bottomsheet

[cedvdb]

When a textfield with autofocus is used in a bottomSheet, the autofocus is not granted to the input and stays on the page in the back. It works for a modalBottomSheet though.

Reproduction:

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: Page1(),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('page1'),
      ),
      body: SingleChildScrollView(
        child: Page1Content(),
      ),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        TextFormField(
          autofocus: true,
        ),
        ElevatedButton(
          onPressed: () {
            showBottomSheet(
              context: context,
              builder: (_) => Container(
                padding: const EdgeInsets.all(20),
                color: Colors.blueGrey[100],
                child: Column(
                  children: [
                    TextFormField(
                      autofocus: true,
                    ),
                  ],
                ),
              ),
            );
          },
          child: Text('Bottom sheet'),
        ),
        ElevatedButton(
            onPressed: () {
              Navigator.of(context)
                  .push(MaterialPageRoute(builder: (ctx) => Page2()));
            },
            child: Text('go to next')),
      ],
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('page2'),
      ),
      body: Container(
        child: TextFormField(
          autofocus: true,
        ),
      ),
    );
  }
}

[darshankawar]

@cedvdb Since you've set autofocus: true, the textfield will always have the cursor focus. If you apply a height to the bottomsheet container (ex: height: 200) and then tap on show bottom sheet, you'll notice that the cursor focus is in the textfield still and hence the bottomsheet's textfield didn't receive the focus.

modalBottomSheet is not same as bottomsheet and may not reflect same behavior. According to the docs,

Modal. A modal bottom sheet is an alternative to a menu or a dialog and prevents the user from interacting with the rest of the app. Modal bottom sheets can be created and displayed with the showModalBottomSheet function.

Hence, the behavior is different as compared to bottomsheet.

[cedvdb]

the autofocus is also set in my bottom sheet. Since it is in front it is expected to be focussed.

The fact that it takes the whole page was to accentuate that fact, but even if it was of size 200 and had autofocus true it would be expected to take focus.

Imo, from an UX perspective, if it appears above the content and has autofocus, it should take focus. I can't imagine a scenario where that wouldn't be the case.

[darshankawar]

Thanks for the details. Keeping this open for further insights from team.

flutter doctor -v

``` [✓] Flutter (Channel stable, 2.2.1, on Mac OS X 10.15.4 19E2269 darwin-x64, locale en-GB) • Flutter version 2.2.1 at /Users/dhs/documents/fluttersdk/flutter • Framework revision 02c026b03c (4 days ago), 2021-05-27 12:24:44 -0700 • Engine revision 0fdb562ac8 • Dart version 2.13.1 [✓] Xcode - develop for iOS and macOS • Xcode at /Applications/Xcode.app/Contents/Developer • Xcode 12.3, Build version 12C33 • CocoaPods version 1.10.1 [✓] Chrome - develop for the web • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome [✓] VS Code (version 1.55.2) • VS Code at /Applications/Visual Studio Code.app/Contents • Flutter extension version 3.21.0 [✓] Connected device (4 available) • Darshan's iphone (mobile) • 21150b119064aecc249dfcfe05e259197461ce23 • ios • iOS 14.4.1 • iPhone 12 Pro Max (mobile) • A5473606-0213-4FD8-BA16-553433949729 • ios • com.apple.CoreSimulator.SimRuntime.iOS-14-3 (simulator) • macOS (desktop) • macos • darwin-x64 • Mac OS X 10.15.4 19E2269 darwin-x64 • Chrome (web) • chrome • web-javascript • Google Chrome 91.0.4472.77 • No issues found! ```

Cc: @Piinks