8000 Dropdown list incorrect position when on-screen keyboard closes · Issue #46676 · flutter/flutter · GitHub
[go: up one dir, main page]
Skip to content
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.

Sign up for GitHub

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

Jump to bottom

Dropdown list incorrect position when on-screen keyboard closes #46676

Closed
roxifas opened this issue Dec 10, 2019 · 16 comments
Closed

Dropdown list incorrect position when on-screen keyboard closes #46676

roxifas opened this issue Dec 10, 2019 · 16 comments
Labels
c: rendering UI glitches reported at the engine/skia or impeller rendering level f: material design flutter/packages/flutter/material repository. found in release: 3.3 Found to occur in 3.3 found in release: 3.6 Found to occur in 3.6 framework flutter/packages/flutter repository. See also f: labels. has reproducible steps The issue has been confirmed reproducible and is ready to work on r: fixed Issue is closed as already fixed in a newer version team-design Owned by Design Languages team triaged-design Triaged by Design Languages team

Comments

@roxifas
Copy link
roxifas commented Dec 10, 2019

Steps to Reproduce

  1. Open dialog with a text field and a dropdown button.
  2. Focus the text field by tapping on it, this opens the keyboard and changes the position of the dialog.
  3. Tap on the dropdown button, its' list is opened in correct position, but the keyboard closes making the dialog go downwards while the dropdown list stays where it opened.

This could also be reproduced without a dialog, but in some form which scrolls, but the behaviour is much more visible with a dialog.

Screenshot of this behaviour:
image

Code sample:

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);
  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () => showDialog(
          context: context,
          builder: (context) => MyDialog(),
        ),
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }
}

class MyDialog extends StatelessWidget {
  @override
  Widget build(BuildContext context) => AlertDialog(
        content: Row(
          children: <Widget>[
            Expanded(
              child: TextField(),
            ),
            Expanded(
              child: DropdownButton<String>(
                items: ['1', '2', '3']
                    .map((i) => DropdownMenuItem<String>(
                          value: i,
                          child: Text(i),
                        ))
                    .toList(),
                onChanged: (_) {},
              ),
            ),
          ],
        ),
      );
}

Target Platform: Android
Target OS version/browser: tested with Android 9 and 8
Devices: tested with Android 9 emulator, Lenovo Tab M10 (Android 8)

Logs

[√] Flutter (Channel beta, v1.12.13+hotfix.4, on Microsoft Windows [Version 10.0.18362.476], locale lt-LT)
    • Flutter version 1.12.13+hotfix.4 at C:\Users\Rokas\FlutterSDK\flutter
    • Framework revision fb60324e6f (11 hours ago), 2019-12-09 15:58:15 -0800
    • Engine revision ac9391978e
    • Dart version 2.7.0


[√] Android toolchain - develop for Android devices (Android SDK version 29.0.2)
    • Android SDK at C:\Users\Rokas\AppData\Local\Android\sdk
    • Android NDK location not configured (optional; useful for native profiling support)
    • Platform android-29, build-tools 29.0.2
    • Java binary at: C:\Program Files\Android\Android Studio\jre\bin\java
    • Java version OpenJDK Runtime Environment (build 1.8.0_202-release-1483-b03)
    • All Android licenses accepted.

[√] Android Studio (version 3.5)
    • Android Studio at C:\Program Files\Android\Android Studio
    • Flutter plugin version 42.0.1
    • Dart plugin version 191.8593
    • Java version OpenJDK Runtime Environment (build 1.8.0_202-release-1483-b03)

[√] VS Code (version 1.40.2)
    • VS Code at C:\Users\Rokas\AppData\Local\Programs\Microsoft VS Code
    • Flutter extension version 3.6.0

[√] Connected device (1 available)
    • AOSP on IA Emulator • emulator-5554 • android-x86 • Android 9 (API 28) (emulator)

• No issues found!
@iapicca iapicca added f: material design flutter/packages/flutter/material repository. c: rendering UI glitches reported at the engine/skia or impeller rendering level labels Dec 10, 2019
@iapicca
Copy link
Contributor
iapicca commented Dec 10, 2019

Tested on physical device

code sample 
import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context)=> MaterialApp(
    home: MyHomePage(),
  );
}

class MyHomePage extends StatefulWidget {

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {

  static final List<int> _items = [1, 2, 3,];

  static void _showDialog(BuildContext context) => 
    showDialog(
      context: context,
      builder: (BuildContext context) => AlertDialog(
        content: Row(
          children: <Widget>[
            Expanded(
              child: TextField(),
            ),
            Expanded(
              child: DropdownButton<String>(
                items: [ for (int i in _items) DropdownMenuItem<String>(
                  value: '$i',
                  child: Text('$i'),)],
                onChanged: (_) {},
              ),
            ),
          ],
        ),
      ),
    );

  @override
  Widget build(BuildContext context) => Scaffold(
    floatingActionButton: FloatingActionButton(
      onPressed: () => _showDialog(context),
      child: Icon(Icons.add),
    ),
  );
}
flutter doctor -v 
[√] Flutter (Channel master, v1.13.1-pre.80, on Microsoft Windows [Version 10.0.19013.1122], locale en-US)
    • Flutter version 1.13.1-pre.80 at C:\src\flutter
    • Framework revision 2fe9623c36 (2 hours ago), 2019-12-10 04:22:32 -0500
    • Engine revision 12bf95fd49
    • Dart version 2.7.0 (build 2.7.0-dev.2.1 8b8894648f)

 
[√] Android toolchain - develop for Android devices (Android SDK version 28.0.3)
8000

    • Android SDK at C:\Users\iapic\AppData\Local\Android\sdk
    • Android NDK location not configured (optional; useful for native profiling support)
    • Platform android-29, build-tools 28.0.3
    • Java binary at: C:\Program Files\Android\Android Studio\jre\bin\java
    • Java version OpenJDK Runtime Environment (build 1.8.0_202-release-1483-b03)        
    • All Android licenses accepted.

[√] Chrome - develop for the web
    • Chrome at C:\Program Files (x86)\Google\Chrome\Application\chrome.exe

[√] Android Studio (version 3.5)
    • Android Studio at C:\Program Files\Android\Android Studio
    • Flutter plugin version 41.1.2
    • Dart plugin version 191.8593
    • Java version OpenJDK Runtime Environment (build 1.8.0_202-release-1483-b03)

[√] VS Code, 64-bit edition (version 1.40.2)
    • VS Code at C:\Program Files\Microsoft VS Code
    • Flutter extension version 3.7.0

[√] Connected device (3 available)
    • Pixel 3a   • 965AY0WP5C • android-arm64  • Android 10 (API 29)
    • Chrome     • chrome     • web-javascript • Google Chrome 78.0.3904.108
    • Web Server • web-server • web-javascript • Flutter Tools

• No issues found!

same result

@HansMuller HansMuller added the framework flutter/packages/flutter repository. See also f: labels. label Dec 11, 2019
@iapicca iapicca mentioned this issue Dec 18, 2019
Closed
@mheidinger
Copy link

Is there any update on a fix or a workaround for this?

@TahaTesser
Copy link
Member
Code Sample 
import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);
  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () => showDialog(
          context: context,
          builder: (context) => MyDialog(),
        ),
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }
}

class MyDialog extends StatelessWidget {
  @override
  Widget build(BuildContext context) => AlertDialog(
        content: Row(
          children: <Widget>[
            Expanded(
              child: TextField(),
            ),
            Expanded(
              child: DropdownButton<String>(
                items: ['1', '2', '3']
                    .map((i) => DropdownMenuItem<String>(
                          value: i,
                          child: Text(i),
                        ))
                    .toList(),
                onChanged: (_) {},
              ),
            ),
          ],
        ),
      );
}
flutter doctor -v 
[✓] Flutter (Channel dev, 1.20.0-2.0.pre, on Mac OS X 10.15.5 19F101, locale
    en-GB)
    • Flutter version 1.20.0-2.0.pre at /Users/tahatesser/Code/flutter_dev
    • Framework revision 15a28159bc (10 days ago), 2020-06-23 04:52:58 -0700
    • Engine revision 91a63d6a44
    • Dart version 2.9.0 (build 2.9.0-19.0.dev 7e72c9ae7e)

[✓] Android toolchain - develop for Android devices (Android SDK version 29.0.3)
    • Android SDK at /Users/tahatesser/Code/sdk
    • Platform android-29, build-tools 29.0.3
    • ANDROID_HOME = /Users/tahatesser/Code/sdk
    • Java binary at: /Applications/Android
      Studio.app/Contents/jre/jdk/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build
      1.8.0_242-release-1644-b3-6222593)
    • All Android licenses accepted.

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

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

[✓] Android Studio (version 4.0)
    • Android Studio at /Applications/Android Studio.app/Contents
    • Flutter plugin version 47.1.2
    • Dart plugin version 193.7361
    • Java version OpenJDK Runtime Environment (build
      1.8.0_242-release-1644-b3-6222593)

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

 
[✓] Connected device (5 available)            
    • SM M305F      • 32003c30dc19668f          • android-arm64  • Android 10
      (API 29)
    • Taha’s iPhone • 00008020-001059882212002E • ios            • iOS 13.5.1
    • macOS desktop • macos                     • darwin-x64     • Mac OS X
      10.15.5 19F101
    • Web Server    • web-server                • web-javascript • Flutter Tools
    • Chrome        • chrome                    • web-javascript • Google Chrome
      83.0.4103.116

• No issues found!

@TahaTesser TahaTesser added found in release: 1.20 Found to occur in 1.20 has reproducible steps The issue has been confirmed reproducible and is ready to work on labels Jul 3, 2020
@ghost
Copy link
ghost commented Jul 8, 2020

can reproduce this on emulator & physical device
both dropdown and popup button have the same issue

@MirnaGuirguis
Copy link

Anybody found a solution for this annoying issue ?
Thanks

@AbdulRafaySiddiqui
Copy link

Capture
I am facing this on the web, and I don't have any on-screen keyboard. Any solution yet?

@kartalbas
Copy link
kartalbas commented Sep 20, 2020 •
edited
Loading

I face the same issue on flutter for web (Flutter, Channel master, 1.22.0-10.0.pre.269, on Microsoft Windows [Version 10.0.19041.508], locale gsw-CH)

will be fixed with #65605

image

@darshankawar darshankawar mentioned this issue Oct 9, 2020
Open
@fysoul17
Copy link

Same issue on the web (Flutter version of 1.22.0)

@ghost
Copy link
ghost commented Oct 28, 2020

Same issue here :/

@panthe
Copy link
panthe commented Oct 30, 2020

Same issue on web

@dannnnthemannnn
Copy link
dannnnthemannnn commented Dec 19, 2020 •
edited
Loading

Fixed locally for myself by making the following change here:

flutter/packages/flutter/lib/src/material/dropdown.dart

Line 1182 in 7891006

final Rect itemRect = itemBox.localToGlobal(Offset.zero) & itemBox.size; 

    final RenderBox overlayBox = Overlay.of(context)!.context.findRenderObject() as RenderBox;
    final Rect itemRect = itemBox.localToGlobal(Offset.zero, ancestor: overlayBox,) & itemBox.size;

I believe this could be made into a PR and submitted to the team as it is the same thing they do for popupmenubutton:

flutter/packages/flutter/lib/src/material/popup_menu.dart

Line 1090 in 7891006

final RenderBox overlay = Overlay.of(context).context.findRenderObject() as RenderBox;

Even the tests in the (abandoned and closed I think?) PR someone did above should work I would guess: #65605

I'm just not very well setup to submit myself :-)

@maheshj01
Copy link
Member

Reproducible on stable 3.3 and the master 3.6 channel.

Screen.Recording.2022-12-02.at.7.56.03.PM.mov
flutter doctor -v (mac) 
[✓] Flutter (Channel master, 3.6.0-6.0.pre.33, on macOS 12.6 21G115 darwin-arm64,
    locale en-IN)
    • Flutter version 3.6.0-6.0.pre.33 on channel master at
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision a9858ec524 (72 minutes ago), 2022-11-21 10:58:11 -0500
    • Engine revision 46a6b54295
    • Dart version 2.19.0 (build 2.19.0-406.0.dev)
    • DevTools version 2.19.0
    • If those were intentional, you can disregard the above warnings; however it is
      recommended to use "git" directly to perform update checks and upgrades.

[✓] Android toolchain - develop for Android devices (Android SDK version 33.0.0-rc4)
    • Android SDK at /Users/mahesh/Library/Android/sdk
    • Platform android-33, build-tools 33.0.0-rc4
    • ANDROID_HOME = /Users/mahesh/Library/Android/sdk
    • Java binary at: /Applications/Android
      Studio.app/Contents/jre/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 11.0.12+0-b1504.28-7817840)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 14.0.1)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Build 14A400
    • CocoaPods version 1.11.3

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

[✓] Android Studio (version 2021.2)
    • Android Studio at /Applications/Android Studio.app/Contents
    • Flutter plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/6351-dart
    • Java version OpenJDK Runtime Environment (build 11.0.12+0-b1504.28-7817840)

[✓] IntelliJ IDEA Community Edition (version 2021.2.1)
    • IntelliJ at /Applications/IntelliJ IDEA CE.app
    • Flutter plugin version 61.2.4
    • Dart plugin version 212.5080.8

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

[✓] Connected device (3 available)
    • iPhone 12 Pro (mobile) • 026D5789-9E78-4AD5-B1B2-3F8D4E7F65E4 • ios
      • com.apple.CoreSimulator.SimRuntime.iOS-14-5 (simulator)
    • macOS (desktop)        • macos                                • darwin-arm64
      • macOS 12.6 21G115 darwin-arm64
    • Chrome (web)           • chrome                               • web-javascript
      • Google Chrome 107.0.5304.110

[✓] HTTP Host Availability
    • All required HTTP hosts are available

• No issues found!

[✓] Flutter (Channel stable, 3.3.9, on macOS 12.6 21G115 darwin-arm, locale en-IN)
    • Flutter version 3.3.9 on channel stable at /Users/mahesh/Development/flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision b8f7f1f986 (24 hours ago), 2022-11-23 06:43:51 +0900
    • Engine revision 8f2221fbef
    • Dart version 2.18.5
    • DevTools version 2.15.0

[✓] Android toolchain - develop for Android devices (Android SDK version 33.0.0-rc4)
    • Android SDK at /Users/mahesh/Library/Android/sdk
    • Platform android-33, build-tools 33.0.0-rc4
    • ANDROID_HOME = /Users/mahesh/Library/Android/sdk
    • Java binary at: /Applications/Android Studio.app/Contents/jre/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 11.0.12+0-b1504.28-7817840)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 14.0.1)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Build 14A400
    • CocoaPods version 1.11.3

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

[✓] Android Studio (version 2021.2)
    • Android Studio at /Applications/Android Studio.app/Contents
    • Flutter plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/6351-dart
    • Java version OpenJDK Runtime Environment (build 11.0.12+0-b1504.28-7817840)

[✓] IntelliJ IDEA Community Edition (version 2021.2.1)
    • IntelliJ at /Applications/IntelliJ IDEA CE.app
    • Flutter plugin version 61.2.4
    • Dart plugin version 212.5080.8

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

[✓] Connected device (3 available)
    • iPhone 12 Pro (mobile) • 026D5789-9E78-4AD5-B1B2-3F8D4E7F65E4 • ios            •
      com.apple.CoreSimulator.SimRuntime.iOS-14-5 (simulator)
    • macOS (desktop)        • macos                                • darwin-arm64   • macOS 12.6 21G115 darwin-arm
    • Chrome (web)           • chrome                               • web-javascript • Google Chrome 107.0.5304.110

[✓] HTTP Host Availability
    • All required HTTP hosts are available

• No issues found!

@maheshj01 maheshj01 added found in release: 3.3 Found to occur in 3.3 found in release: 3.6 Found to occur in 3.6 and removed found in release: 1.20 Found to occur in 1.20 labels Dec 3, 2022
@maheshj01 maheshj01 mentioned this issue Dec 22, 2022
Closed
@Sahilskr

This comment has been minimized.

Sign in to view
@flutter-triage-bot flutter-triage-bot bot added multiteam-retriage-candidate team-design Owned by Design Languages team triaged-design Triaged by Design Languages team labels Jul 8, 2023
@dam-ease dam-ease mentioned this issue Aug 14, 2023
Closed
2 tasks
@Miguel-A-Jara

This comment has been minimized.

Sign in to view
@Sahilskr
Copy link
Sahilskr commented Feb 29, 2024 via email

@Piinks
Copy link
Contributor
Piinks commented Feb 14, 2025

This appears to be fixed 🎊 - tested at tip of tree with the original sample on multiple platforms. If this does persist, please file a new issue with an updated reproduction. Thanks!

@Piinks Piinks closed this as completed Feb 14, 2025
@maheshj01 maheshj01 added the r: fixed Issue is closed as already fixed in a newer version label Feb 14, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
c: rendering UI glitches reported at the engine/skia or impeller rendering level f: material design flutter/packages/flutter/material repository. found in release: 3.3 Found to occur in 3.3 found in release: 3.6 Found to occur in 3.6 framework flutter/packages/flutter repository. See also f: labels. has reproducible steps The issue has been confirmed reproducible and is ready to work on r: fixed Issue is closed as already fixed in a newer version team-design Owned by Design Languages team triaged-design Triaged by Design Languages team
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
0