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

DropdownMenu overflow with large helper text #147173

Closed
PurplePolyhedron opened this issue Apr 22, 2024 · 2 comments · Fixed by #147233
Closed

DropdownMenu overflow with large helper text #147173

PurplePolyhedron opened this issue Apr 22, 2024 · 2 comments · Fixed by #147233
Assignees
@PurplePolyhedron
Labels
f: material design flutter/packages/flutter/material repository. found in release: 3.19 Found to occur in 3.19 found in release: 3.22 Found to occur in 3.22 framework flutter/packages/flutter repository. See also f: labels. has reproducible steps The issue has been confirmed reproducible and is ready to work on P2 Important issues not at the top of the work list 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

@PurplePolyhedron
Copy link
Contributor

PurplePolyhedron commented Apr 22, 2024 •
edited

Steps to reproduce

Use DropdownMenu with large helper text.
The size and helper text which causes helper text to crop is tricky and need magic number

Expected results

input region ("hint text") should be able to tapped to select.
helper text should not be cropped.

Actual results

input region cannot be able to tapped to select.
text is cropped

Code sample

Code sample 
import "package:flutter/material.dart";
  
void main() => runApp(const MyMenuApp());


class MyMenuApp extends StatelessWidget {
  const MyMenuApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      home: Scaffold(
        body: SizedBox(
          width: 327,
          height: 658,
          child: Center(
            child: Container(
              color: Colors.purple,
              child: DropdownMenu<int>(
                hintText: 'Hint text',
                helperText: 'This is a long helper text that need 3 lines',
                inputDecorationTheme: InputDecorationTheme(
                    helperMaxLines: 3, helperStyle: TextStyle(fontSize: 30)),
                dropdownMenuEntries: <DropdownMenuEntry<int>>[
                  DropdownMenuEntry<int>(
                    value: 0,
                    label: 'MenuEntry Item 1',
                  ),
                ],
              ),
            ),
          ),
        ),
      ),
    );
  }
}

Screenshots or Video

Screenshots / Video demonstration

[Upload media here]

Screenshot 2024-04-23 at 2 23 52 AM

Logs

Logs 
[Paste your logs here]

Flutter Doctor output

Doctor output 
[✓] Flutter (Channel master, 3.22.0-14.0.pre.67, on macOS 14.4 23E214 darwin-arm64, locale en-AU)
    • Flutter version 3.22.0-14.0.pre.67 on channel master at /Users/mainj/fvm/versions/master
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 1a905d508d (30 hours ago), 2024-04-21 06:44:23 -0400
    • Engine revision 75ca2195c9
    • Dart version 3.5.0 (build 3.5.0-83.0.dev)
    • DevTools version 2.35.0-dev.8
....
@PurplePolyhedron
Copy link
Contributor Author

I think I know how to fix this along with the width overflow part of #147076 but I haven't figure out how to write the test for this issue yet.
ffa54dd

@danagbemava-nc danagbemava-nc added in triage Presently being triaged by the triage team framework flutter/packages/flutter repository. See also f: labels. f: material design flutter/packages/flutter/material repository. has reproducible steps The issue has been confirmed reproducible and is ready to work on team-design Owned by Design Languages team found in release: 3.19 Found to occur in 3.19 found in release: 3.22 Found to occur in 3.22 and removed in triage Presently being triaged by the triage team labels Apr 23, 2024
@danagbemava-nc
Copy link
Member

Reproducible using the code sample provided above.

Screen.Recording.2024-04-23.at.07.30.03.mov
flutter doctor -v 
[✓] Flutter (Channel stable, 3.19.6, on macOS 14.4.1 23E224 darwin-arm64, locale en-GB)
    • Flutter version 3.19.6 on channel stable at /Users/nexus/dev/sdks/flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 54e66469a9 (5 days ago), 2024-04-17 13:08:03 -0700
    • Engine revision c4cd48e186
    • Dart version 3.3.4
    • DevTools version 2.31.1

[✓] Android toolchain - develop for Android devices (Android SDK version 34.0.0)
    • Android SDK at /Users/nexus/Library/Android/sdk
    • Platform android-34, build-tools 34.0.0
    • Java binary at: /Users/nexus/Applications/Android Studio.app/Contents/jbr/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 17.0.7+0-17.0.7b1000.6-10550314)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 15.3)
    • Xcode at /Applications/Xcode-15.3.0.app/Contents/Developer
    • Build 15E204a
    • CocoaPods version 1.15.2

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

[✓] Android Studio (version 2023.1)
    • Android Studio at /Users/nexus/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 17.0.7+0-17.0.7b1000.6-10550314)

[✓] IntelliJ IDEA Ultimate Edition (version 2023.2.5)
    • IntelliJ at /Users/nexus/Applications/IntelliJ IDEA Ultimate.app
    • Flutter plugin version 77.2.2
    • Dart plugin version 232.10286

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

[✓] Connected device (5 available)
    • Pixel 7 (mobile)     • adb-28291FDH2001SA-5Lv71w._adb-tls-connect._tcp. • android-arm64  • Android 14 (API 34)
    • Nexus (mobile)       • 00008020-001875E83A38002E                        • ios            • iOS 17.4.1 21E236
    • Dean’s iPad (mobile) • 00008103-000825C811E3401E                        • ios            • iOS 17.4.1 21E236
    • macOS (desktop)      • macos                                            • darwin-arm64   • macOS 14.4.1 23E224 darwin-arm64
    • Chrome (web)         • chrome                                           • web-javascript • Google Chrome 124.0.6367.62

[✓] Network resources
    • All expected network resources are available.

• No issues found!

[!] Flutter (Channel master, 3.22.0-15.0.pre.21, on macOS 14.4.1 23E224 darwin-arm64, locale en-GB)
    • Flutter version 3.22.0-15.0.pre.21 on channel master at /Users/nexus/dev/sdks/flutters
    ! Warning: `flutter` on your path resolves to /Users/nexus/dev/sdks/flutter/bin/flutter, which is not inside your current Flutter SDK checkout at /Users/nexus/dev/sdks/flutters. Consider adding /Users/nexus/dev/sdks/flutters/bin to the front of your path.
    ! Warning: `dart` on your path resolves to /Users/nexus/dev/sdks/flutter/bin/dart, which is not inside your current Flutter SDK checkout at /Users/nexus/dev/sdks/flutters. Consider adding /Users/nexus/dev/sdks/flutters/bin to the front of your path.
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 1be28aa61a (2 hours ago), 2024-04-23 13:26:09 +0800
    • Engine revision 9c0d24ff1c
    • Dart version 3.5.0 (build 3.5.0-88.0.dev)
    • DevTools version 2.35.0-dev.8
    • 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 34.0.0)
    • Android SDK at /Users/nexus/Library/Android/sdk
    • Platform android-34, build-tools 34.0.0
    • Java binary at: /Users/nexus/Applications/Android Studio.app/Contents/jbr/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 17.0.7+0-17.0.7b1000.6-10550314)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 15.3)
    • Xcode at /Applications/Xcode-15.3.0.app/Contents/Developer
    • Build 15E204a
    • CocoaPods version 1.15.2

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

[✓] Android Studio (version 2023.1)
    • Android Studio at /Users/nexus/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 17.0.7+0-17.0.7b1000.6-10550314)

[✓] IntelliJ IDEA Ultimate Edition (version 2023.2.5)
    • IntelliJ at /Users/nexus/Applications/IntelliJ IDEA Ultimate.app
    • Flutter plugin version 77.2.2
    • Dart plugin version 232.10286

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

[✓] Connected device (6 available)
    • Pixel 7 (mobile)                • adb-28291FDH2001SA-5Lv71w._adb-tls-connect._tcp. • android-arm64  • Android 14 (API 34)
    • Nexus (mobile)                  • 00008020-001875E83A38002E                        • ios            • iOS 17.4.1 21E236
    • Dean’s iPad (mobile)            • 00008103-000825C811E3401E                        • ios            • iOS 17.4.1 21E236
    • macOS (desktop)                 • macos                                            • darwin-arm64   • macOS 14.4.1 23E224 darwin-arm64
    • Mac Designed for iPad (desktop) • mac-designed-for-ipad                            • darwin         • macOS 14.4.1 23E224 darwin-arm64
    • Chrome (web)                    • chrome                                           • web-javascript • Google Chrome 124.0.6367.62

[✓] Network resources
    • All expected network resources are available.

! Doctor found issues in 1 category.

@PurplePolyhedron PurplePolyhedron mentioned this issue Apr 23, 2024
Merged
9 tasks
@Piinks Piinks added waiting for PR to land (fixed) A fix is in flight P2 Important issues not at the top of the work list triaged-design Triaged by Design Languages team labels Apr 24, 2024
auto-submit bot pushed a commit that referenced this issue May 1, 2024
@PurplePolyhedron
fix DropdownMenu overflow (#147233)
68f8b53 
fix `DropdownMenu` overflow issue in  #147076 and #147173
However I believe the the menu placement issue in #147076 is a separate issue. It is not fixed here.

fixes #147173
@danagbemava-nc danagbemava-nc added r: fixed Issue is closed as already fixed in a newer version and removed waiting for PR to land (fixed) A fix is in flight labels May 2, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@PurplePolyhedron PurplePolyhedron

Labels
f: material design flutter/packages/flutter/material repository. found in release: 3.19 Found to occur in 3.19 found in release: 3.22 Found to occur in 3.22 framework flutter/packages/flutter repository. See also f: labels. has reproducible steps The issue has been confirmed reproducible and is ready to work on P2 Important issues not at the top of the work list 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

Successfully merging a pull request may close this issue.

fix DropdownMenu overflow PurplePolyhedron/flutter
3 participants
@Piinks @danagbemava-nc @PurplePolyhedron