Skip to content

DropdownMenu keyboard navigation is broken #147253

@diegonc

Description

@diegonc

Steps to reproduce

  1. Run sample code on Windows platform
  2. Press tab until the handle of the DropdownMenu is focused
  3. Press enter to open the menu
  4. Press the down key to navigate

Expected results

The menu opens with the first option selected and when pressing the Down key the options should cycle downwards.

Actual results

The menu opens with the second option selected and when pressing the down key cycles until the option g (which is the initial selection).

If I instead try to cycle upwards using the Up key, the cycle completes and restart from the end once the start of the list is reached. However, the initially selected option is skipped.

There are also other glitches like the text not being in sync with the selected menu option, as shown on the screenshot below.

Code sample

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

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

enum Units {
  unit,
  kg,
  g,
  l,
  cc;
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  Units? _unit = Units.g;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: DropdownMenu<Units>(
          initialSelection: _unit,
          dropdownMenuEntries: Units.values
              .map((unit) => DropdownMenuEntry(
                    value: unit,
                    label: unit.name,
                  ))
              .toList(),
          onSelected: (value) {
            setState(() {
              _unit = value;
            });
          },
        ),
      ),
    );
  }
}

Screenshots or Video

Screenshots

Mismatched text and menu option when cycling upwards:
image

Logs

No response

Flutter Doctor output

Doctor output
> flutter doctor -v
[✓] Flutter (Channel stable, 3.19.5, on Microsoft Windows [Versi¢n 10.0.22631.3447], locale es-AR)
    • Flutter version 3.19.5 on channel stable at D:\diego\PROGRAMACION\Tools\flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 300451adae (4 weeks ago), 2024-03-27 21:54:07 -0500
    • Engine revision e76c956498
    • Dart version 3.3.3
    • DevTools version 2.31.1

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

[✓] Android toolchain - develop for Android devices (Android SDK version 33.0.1)
    • Android SDK at D:\diego\PROGRAMACION\SDKs\Android
    • Platform android-34, build-tools 33.0.1
    • Java binary at: D:\diego\PROGRAMACION\Tools\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.9.6)
    • Visual Studio at C:\Program Files\Microsoft Visual Studio\2022\Community
    • Visual Studio Community 2022 version 17.9.34728.123
    • Windows 10 SDK version 10.0.22621.0

[✓] Android Studio (version 2023.2)
    • Android Studio at D:\diego\PROGRAMACION\Tools\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)

[✓] VS Code (version 1.88.0)
    • VS Code at C:\Users\diego\AppData\Local\Programs\Microsoft VS Code
    • Flutter extension can be installed from:
      🔨 https://marketplace.visualstudio.com/items?itemName=Dart-Code.flutter

[✓] Connected device (3 available)
    • Windows (desktop) • windows • windows-x64    • Microsoft Windows [Versi¢n 10.0.22631.3447]
    • Chrome (web)      • chrome  • web-javascript • Google Chrome 124.0.6367.61
    • Edge (web)        • edge    • web-javascript • Microsoft Edge 123.0.2420.65

[✓] 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 listf: material designflutter/packages/flutter/material repository.found in release: 3.19Found to occur in 3.19found 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