ScaffoldState.openDrawer brings the keyboard up

As soon as I press Drawer button, it shows me keyboard back.

Please see this gif that demonstrates the issue

My code is quite simple:

    return GestureDetector(
      onTap: () => FocusScope.of(context).unfocus(),
      child: ListView(
        padding: const EdgeInsets.all(16.0),
        children: <Widget>[
            //... my form widgets go here
        ],),);

flutter doctor -v

[✓] Flutter (Channel beta, v1.17.0, on Mac OS X 10.15.3 19D76, locale en-RU)
    • Flutter version 1.17.0 at /Users/andrey/flutter_beta
    • Framework revision d3ed9ec945 (2 days ago), 2020-04-06 14:07:34 -0700
    • Engine revision c9506cb8e9
    • Dart version 2.8.0 (build 2.8.0-dev.18.0 eea9717938)

 
[✓] Android toolchain - develop for Android devices (Android SDK version 28.0.3)
    • Android SDK at /Users/andrey/Library/Android/sdk
    • Platform android-29, build-tools 28.0.3
    • ANDROID_HOME = /Users/andrey/Library/Android/sdk
    • Java binary at: /Applications/Android Studio.app/Contents/jre/jdk/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 1.8.0_202-release-1483-b49-5587405)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 11.4)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Xcode 11.4, Build version 11E146
    • CocoaPods version 1.8.4

[✓] Chrome - develop for the web
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[!] Android Studio (version 3.5)
    • Android Studio at /Applications/Android Studio.app/Contents
    ✗ Flutter plugin not installed; this adds Flutter specific functionality.
    ✗ Dart plugin not installed; this adds Dart specific functionality.
    • Java version OpenJDK Runtime Environment (build 1.8.0_202-release-1483-b49-5587405)

[✓] VS Code (version 1.43.2)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.9.1

[✓] Connected device (5 available)
    • Android SDK built for x86 • emulator-5554                            • android-x86    • Android 8.1.0 (API 27) (emulator)
    • iPad                      • 8807f3e1632ff643cc3f92f0f207ae5a7d831121 • ios            • iOS 13.3.1
    • iPhone 11 Pro             • 1A5C302F-1156-4A9E-A269-1B0B80B2BCBC     • ios            • com.apple.CoreSimulator.SimRuntime.iOS-13-4 (simulator)
    • Chrome                    • chrome                                   • web-javascript • Google Chrome 80.0.3987.163
    • Web Server                • web-server                               • web-javascript • Flutter Tools

! Doctor found issues in 1 category.

@agordeev

Hi @agordeev
could you please provide a complete minimal reproducible code sample? such that I can copy and run

or edit this

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 StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () {
        FocusScopeNode currentFocus = FocusScope.of(context);
        if (!currentFocus.hasPrimaryFocus) {
          currentFocus.unfocus();
        }
      },
      child: Scaffold(
        appBar: AppBar(title: Text('title')),
        body: Center(child: TextField()),
        drawer: Drawer(
          child: ListView(
            padding: EdgeInsets.zero,
            children: <Widget>[
              DrawerHeader(
                child: Text('Drawer Header'),
                decoration: BoxDecoration(
                  color: Colors.blue,
                ),
              ),
              ListTile(
                title: Text('Item 1'),
                onTap: () {
                  Navigator.pop(context);
                },
              ),
              ListTile(
                title: Text('Item 2'),
                onTap: () {
                  Navigator.pop(context);
                },
              ),
            ],
          ),
        ),
      ),
    );
  }
}

I can't reproduce with it

@agordeev

Hi @agordeev
Are you still experiencing this issue?
Thank you

Yes, it's still reproducible on 1.17.0-3.3.pre. It's not reproducible with the code snippet above though.

@agordeev

@agordeev
provide please a complete minimal reproducible code sample

@VladyslavBondarenko

@VladyslavBondarenko this issue is not my priority at this moment, so I'm going to close it for now.

I bisected this and traced the cause to this PR, which makes sense.

I'll try and track down the exact cause of the regression.

Actually, it looks like the example code has a bug in it, and the PR (which corrected some buggy behavior in focus handling) has tickled that bug:

The corrected code should look like this:

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 StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () {
        final FocusScopeNode currentScope = FocusScope.of(context);
        if (!currentScope.hasPrimaryFocus && currentScope.hasFocus) {
          FocusManager.instance.primaryFocus.unfocus();
        }
      },
      child: Scaffold(
        appBar: AppBar(title: const Text('title')),
        body: const Center(child: TextField()),
        drawer: Drawer(
          child: ListView(
            padding: EdgeInsets.zero,
            children: <Widget>[
              const DrawerHeader(
                child: Text('Drawer Header'),
                decoration: BoxDecoration(
                  color: Colors.blue,
                ),
              ),
              ListTile(
                title: const Text('Item 1'),
                onTap: () {
                  Navigator.pop(context);
                },
              ),
              ListTile(
                title: const Text('Item 2'),
                onTap: () {
                  Navigator.pop(context);
                },
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Where instead of:

      onTap: () {
        FocusScopeNode currentFocus = FocusScope.of(context);
        if (!currentFocus.hasPrimaryFocus) {
          currentFocus.unfocus();
        }
      },

The code should be:

      onTap: () {
        final FocusScopeNode currentScope = FocusScope.of(context);
        if (!currentScope.hasPrimaryFocus && currentScope.hasFocus) {
          FocusManager.instance.primaryFocus.unfocus();
        }
      },

The original version gets the scope of the current context (which is the modal scope for the navigator's overlay), and then tells the scope to unfocus itself only if it does not have primary focus. Which, if the text field doesn't have focus, the scope does have focus, so it doesn't call unfocus at all then.

If the text field does have focus, then the code does call unfocus on the scope, which hands the focus to its parent scope, which is the navigator scope. Then, when the navigator pushes the drawer route, it tries to focus its own scope, but since we've just focused the navigator's scope, and the "first focus" of that scope is still the child scope, and its first focus is the editable text, the editable text gets focus again, raising the keyboard.

My recommendation above will instead only unfocus the primary focus if it is on a descendant of the current scope, but won't unfocus the scope itself, so it doesn't hand focus to the navigator's scope.

The bug in the example is that it calls unfocus on itself: it should call unfocus on the primaryFocus.

I'm going to close this issue, since it appears that #54277 (comment) explains how to use correctly use the unfocus API and avoid the problem.

@HansMuller

This issue still happens

Flutter (Channel stable, 2.2.1, on Mac OS X 10.15.6 19G2021 darwin-x64,
    locale en-PH)

I Tried adding the code from #54277 (comment) before opening the Drawer but it doesnt work

@HansMuller any advice?

@basilmariano

@basilmariano, as @gspencergoog explained, this worked for me:

onTap: () {
        final FocusScopeNode currentScope = FocusScope.of(context);
        if (!currentScope.hasPrimaryFocus && currentScope.hasFocus) {
          FocusManager.instance.primaryFocus.unfocus();
        }
      },

This thread has been automatically locked since there has not been any recent activity after it was closed. If you are still experiencing a similar issue, please open a new bug, including the output of flutter doctor -v and a minimal reproduction of the issue.

Fix incorrect behavior of ScrollViewKeyboardDismissBehavior.onDrag fo…

Navigation Menu

Repository navigation

ScaffoldState.openDrawer brings the keyboard up #54277

10 remaining items

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

ScaffoldState.openDrawer brings the keyboard up #54277

Description

Activity

VladyslavBondarenko commented on Apr 8, 2020

TahaTesser commented on Apr 30, 2020

agordeev commented on Apr 30, 2020

VladyslavBondarenko commented on Apr 30, 2020

agordeev commented on May 1, 2020

10 remaining items

gspencergoog commented on Jun 9, 2020

gspencergoog commented on Jun 9, 2020

HansMuller commented on Aug 7, 2020

basilmariano commented on Jun 14, 2021

tattivitorino commented on Jun 23, 2021

github-actions commented on Jul 31, 2021

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions