Skip to content

DropdownMenu Entries Not Positioned Correctly on Keyboard Appearance when requestFocusOnTap set to true #149037

@lew-kas

Description

@lew-kas

Steps to reproduce

  1. Use the provided code snippet from the Flutter examples below. The only difference from the actual example is the property requestFocusOnTap set to true
  2. Click into the DropdownMenu to enter a search term.
  3. Observe the behavior when the keyboard appears.

Expected results

The DropdownEntries should move upwards and be displayed right under the DropdownMenu when the keyboard appears.

Actual results

The DropdownEntries remain further down on the screen and do not follow the DropdownMenu as it moves upwards, causing a misalignment.

Code sample

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

/// Flutter code sample for the [DropdownMenuEntry] `labelWidget` property.

enum ColorItem {
  blue('Blue', Colors.blue),
  pink('Pink', Colors.pink),
  green('Green', Colors.green),
  yellow('Yellow', Colors.yellow),
  grey('Grey', Colors.grey);

  const ColorItem(this.label, this.color);
  final String label;
  final Color color;
}

class DropdownMenuEntryLabelWidgetExample extends StatefulWidget {
  const DropdownMenuEntryLabelWidgetExample({super.key});

  @override
  State<DropdownMenuEntryLabelWidgetExample> createState() =>
      _DropdownMenuEntryLabelWidgetExampleState();
}

class _DropdownMenuEntryLabelWidgetExampleState
    extends State<DropdownMenuEntryLabelWidgetExample> {
  late final TextEditingController controller;

  @override
  void initState() {
    super.initState();
    controller = TextEditingController();
  }

  @override
  void dispose() {
    controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    const String longText =
        'is a color that sings of hope, A hue that shines like gold. It is the color of dreams, A shade that never grows old.';

    return Scaffold(
      body: Center(
        child: DropdownMenu<ColorItem>(
          width: 300,
          controller: controller,
          initialSelection: ColorItem.green,
          requestFocusOnTap: true,
          label: const Text('Color'),
          onSelected: (ColorItem? color) {
            print('Selected $color');
          },
          dropdownMenuEntries: ColorItem.values
              .map<DropdownMenuEntry<ColorItem>>((ColorItem item) {
            final String labelText = '${item.label} $longText\n';
            return DropdownMenuEntry<ColorItem>(
              value: item,
              label: labelText,
              labelWidget: Text(
                labelText,
                maxLines: 1,
                overflow: TextOverflow.ellipsis,
              ),
            );
          }).toList(),
        ),
      ),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: DropdownMenuEntryLabelWidgetExample(),
    );
  }
}

void main() {
  runApp(const DropdownMenuEntryLabelWidgetExampleApp());
}

Screenshots or Video

Screenshots / Video demonstration
dropdownmenu.webm

Logs

Logs

Flutter Doctor output

[√] Flutter (Channel stable, 3.22.1, on Microsoft Windows [Version 10.0.22631.3593], locale
de-DE)
• Flutter version 3.22.1 on channel stable at C:\flutter
• Upstream repository https://github.com/flutter/flutter.git
• Framework revision a14f74f (2 days ago), 2024-05-22 11:08:21 -0500
• Engine revision 55eae6864b
• Dart version 3.4.1
• DevTools version 2.34.3

[√] Windows Version (Installed version of Windows is version 10 or higher)

[√] Android toolchain - develop for Android devices (Android SDK version 33.0.0-rc4)
• Android SDK at C:\Users\demo\AppData\Local\Android\Sdk
• Platform android-34, build-tools 33.0.0-rc4
• ANDROID_SDK_ROOT = C:\Users\demo\AppData\Local\Android\Sdk
• Java binary at: C:\Program Files\Android\Android Studio\jbr\bin\java
• Java version OpenJDK Runtime Environment (build 17.0.9+0--11185874)
• All Android licenses accepted.

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

[√] Visual Studio - develop Windows apps (Visual Studio Community 2022 17.2.3)
• Visual Studio at C:\Program Files\Microsoft Visual Studio\2022\Community
• Visual Studio Community 2022 version 17.2.32526.322
• Windows 10 SDK version 10.0.19041.0

[√] Android Studio (version 2023.2)
• Android Studio at C:\Program Files\Android\Android Studio
• 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.9+0--11185874)

[√] IntelliJ IDEA Ultimate Edition (version 2021.2)
• IntelliJ at C:\Program Files\JetBrains\IntelliJ IDEA 2021.1.2
• 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

[√] IntelliJ IDEA Ultimate Edition (version 2023.2)
• IntelliJ at C:\Program Files\JetBrains\IntelliJ IDEA 2023.2
• 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

[√] VS Code (version 1.89.1)
• VS Code at C:\Users\demo\AppData\Local\Programs\Microsoft VS Code
• Flutter extension version 3.88.0

[√] Connected device (4 available)
• sdk gphone64 x86 64 (mobile) • emulator-5554 • android-x64 • Android 12 (API 31)
(emulator)
• Windows (desktop) • windows • windows-x64 • Microsoft Windows [Version
10.0.22631.3593]
• Chrome (web) • chrome • web-javascript • Google Chrome
124.0.6367.210
• Edge (web) • edge • web-javascript • Microsoft Edge
125.0.2535.51

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

• No issues found!

Metadata

Metadata

Assignees

No one assigned

    Labels

    P2Important issues not at the top of the work lista: text inputEntering text in a text field or keyboard related problemsf: material designflutter/packages/flutter/material repository.found in release: 3.22Found to occur in 3.22frameworkflutter/packages/flutter repository. See also f: labels.has reproducible stepsThe issue has been confirmed reproducible and is ready to work onr: fixedIssue is closed as already fixed in a newer versionteam-designOwned by Design Languages teamtriaged-designTriaged by Design Languages team

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions