Skip to content

ScaffoldState.openDrawer brings the keyboard up #54277

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
agordeev opened this issue Apr 8, 2020 · 14 comments · Fixed by #148948
Closed

ScaffoldState.openDrawer brings the keyboard up #54277

agordeev opened this issue Apr 8, 2020 · 14 comments · Fixed by #148948
Labels
a: text input Entering text in a text field or keyboard related problems c: regression It was better in the past than it is now f: focus Focus traversal, gaining or losing focus f: material design flutter/packages/flutter/material repository. found in release: 1.17 Found to occur in 1.17 found in release: 1.18 Occurs in 1.18 found in release: 1.19 Found to occur in 1.19 framework flutter/packages/flutter repository. See also f: labels. has reproducible steps The issue has been confirmed reproducible and is ready to work on

Comments

@agordeev
Copy link
Contributor

agordeev commented Apr 8, 2020

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

Please see this gif that demonstrates the issue

video

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.
@VladyslavBondarenko
Copy link

VladyslavBondarenko commented Apr 8, 2020

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

@VladyslavBondarenko VladyslavBondarenko added the waiting for customer response The Flutter team cannot make further progress on this issue until the original reporter responds label Apr 8, 2020
@HansMuller HansMuller added f: material design flutter/packages/flutter/material repository. framework flutter/packages/flutter repository. See also f: labels. labels Apr 8, 2020
@TahaTesser
Copy link
Member

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

@TahaTesser TahaTesser added waiting for customer response The Flutter team cannot make further progress on this issue until the original reporter responds and removed waiting for customer response The Flutter team cannot make further progress on this issue until the original reporter responds f: material design flutter/packages/flutter/material repository. framework flutter/packages/flutter repository. See also f: labels. labels Apr 30, 2020
@agordeev
Copy link
Contributor Author

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

@no-response no-response bot removed the waiting for customer response The Flutter team cannot make further progress on this issue until the original reporter responds label Apr 30, 2020
@VladyslavBondarenko
Copy link

@agordeev
provide please a complete minimal reproducible code sample

@VladyslavBondarenko VladyslavBondarenko added waiting for customer response The Flutter team cannot make further progress on this issue until the original reporter responds in triage Presently being triaged by the triage team labels Apr 30, 2020
@agordeev
Copy link
Contributor Author

agordeev commented May 1, 2020

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

@agordeev agordeev closed this as completed May 1, 2020
@no-response no-response bot removed the waiting for customer response The Flutter team cannot make further progress on this issue until the original reporter responds label May 1, 2020
@xsahil03x
Copy link

xsahil03x commented May 14, 2020

@agordeev I am facing similar issue.

@mohammadamirnm
Copy link

mohammadamirnm commented May 18, 2020

The same issue happened to me.
It only happens when you close the keyboard shown for a Texfield with
FocusScope.of(context).unfocus();
This issue needs a fix and should not be closed.

@VladyslavBondarenko
Copy link

Reproduces with current stable 1.17.1 (1.17.0 as well), beta 1.18.0-11.1.pre, dev 1.19.0-1.0.pre.
But not with previous stable v1.12.13+hotfix.9.

Code sample from #54277 (comment)

@VladyslavBondarenko VladyslavBondarenko added f: focus Focus traversal, gaining or losing focus f: material design flutter/packages/flutter/material repository. found in release: 1.17 Found to occur in 1.17 found in release: 1.18 Occurs in 1.18 found in release: 1.19 Found to occur in 1.19 framework flutter/packages/flutter repository. See also f: labels. has reproducible steps The issue has been confirmed reproducible and is ready to work on c: regression It was better in the past than it is now and removed in triage Presently being triaged by the triage team labels May 18, 2020
@VladyslavBondarenko VladyslavBondarenko added the a: text input Entering text in a text field or keyboard related problems label May 18, 2020
@gspencergoog
Copy link
Contributor

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.

@gspencergoog
Copy link
Contributor

gspencergoog commented Jun 9, 2020

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.

@HansMuller
Copy link
Contributor

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.

@basilmariano
Copy link

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?

@tattivitorino
Copy link

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

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

@github-actions
Copy link

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.

@github-actions github-actions bot locked as resolved and limited conversation to collaborators Jul 31, 2021
auto-submit bot pushed a commit that referenced this issue May 31, 2024

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature.
…r ScrollViewers with Drawer (#148948)

Fixes #141542
Fixes #103544
Fixes #54277
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
a: text input Entering text in a text field or keyboard related problems c: regression It was better in the past than it is now f: focus Focus traversal, gaining or losing focus f: material design flutter/packages/flutter/material repository. found in release: 1.17 Found to occur in 1.17 found in release: 1.18 Occurs in 1.18 found in release: 1.19 Found to occur in 1.19 framework flutter/packages/flutter repository. See also f: labels. has reproducible steps The issue has been confirmed reproducible and is ready to work on
Projects
None yet
9 participants