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.

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

DropdownMenu keyboard navigation is broken #147253

Closed
diegonc opened this issue Apr 23, 2024 · 4 comments · Fixed by #147294
Closed

DropdownMenu keyboard navigation is broken #147253

diegonc opened this issue Apr 23, 2024 · 4 comments · Fixed by #147294
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

@diegonc
Copy link

diegonc commented Apr 23, 2024

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!
@diegonc diegonc changed the title DrowpdownMenu key navigation is broken DrowpdownMenu keyboard navigation is broken Apr 23, 2024
@diegonc
Copy link
Author

diegonc commented Apr 23, 2024

Removing the initial selection doesn't workaround the issue. I'll test changing the name of the g option; I suspect that letter being shared with the kg option could be the issue.

@diegonc
Copy link
Author

diegonc commented Apr 23, 2024

Yeah, changing g to grams is a workaround for the issue.

@huycozy huycozy added the in triage Presently being triaged by the triage team label Apr 24, 2024
@huycozy huycozy changed the title DrowpdownMenu keyboard navigation is broken DropdownMenu keyboard navigation is broken Apr 24, 2024
@huycozy
Copy link
Member

huycozy commented Apr 24, 2024

Thank you for filing the issue. I'm able to reproduce this on macOS app target. This could be related to TextEditingValue's selection calculation.

flutter doctor -v (stable and master)
[✓] Flutter (Channel stable, 3.19.6, on macOS 14.1 23B74 darwin-x64, locale en-VN)
    • Flutter version 3.19.6 on channel stable at /Users/huynq/Documents/GitHub/flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 54e66469a9 (31 hours 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/huynq/Library/Android/sdk
    • Platform android-34, build-tools 34.0.0
    • ANDROID_HOME = /Users/huynq/Library/Android/sdk
    • Java binary at: /Applications/Android Studio.app/Contents/jbr/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 17.0.9+0-17.0.9b1087.7-11185874)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 15.3)
    • Xcode at /Applications/Xcode15.3.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.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
    • android-studio-dir = /Applications/Android Studio.app/
    • Java version OpenJDK Runtime Environment (build 17.0.9+0-17.0.9b1087.7-11185874)

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

[✓] Connected device (3 available)
    • RMX2001 (mobile) • EUYTFEUSQSRGDA6D • android-arm64  • Android 11 (API 30)
    • macOS (desktop)  • macos            • darwin-x64     • macOS 14.1 23B74 darwin-x64
    • Chrome (web)     • chrome           • web-javascript • Google Chrome 123.0.6312.124

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

• No issues found!
[!] Flutter (Channel master, 3.22.0-16.0.pre.39, on macOS 14.1 23B74 darwin-x64, locale en-VN)
    • Flutter version 3.22.0-16.0.pre.39 on channel master at /Users/huynq/Documents/GitHub/flutter_master
    ! Warning: `flutter` on your path resolves to /Users/huynq/Documents/GitHub/flutter/bin/flutter, which is not inside your current Flutter SDK checkout at /Users/huynq/Documents/GitHub/flutter_master. Consider adding /Users/huynq/Documents/GitHub/flutter_master/bin to the front of your path.
    ! Warning: `dart` on your path resolves to /Users/huynq/Documents/GitHub/flutter/bin/dart, which is not inside your current Flutter SDK checkout at /Users/huynq/Documents/GitHub/flutter_master. Consider adding /Users/huynq/Documents/GitHub/flutter_master/bin to the front of your path.
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 49770cd929 (24 minutes ago), 2024-04-23 22:55:10 -0400
    • Engine revision d4f63383d3
    • Dart version 3.5.0 (build 3.5.0-92.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/huynq/Library/Android/sdk
    • Platform android-34, build-tools 34.0.0
    • ANDROID_HOME = /Users/huynq/Library/Android/sdk
    • Java binary at: /Applications/Android Studio.app/Contents/jbr/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 17.0.9+0-17.0.9b1087.7-11185874)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 15.3)
    • Xcode at /Applications/Xcode15.3.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.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
    • android-studio-dir = /Applications/Android Studio.app/
    • Java version OpenJDK Runtime Environment (build 17.0.9+0-17.0.9b1087.7-11185874)

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

[✓] Connected device (2 available)
    • macOS (desktop) • macos  • darwin-x64     • macOS 14.1 23B74 darwin-x64
    • Chrome (web)    • chrome • web-javascript • Google Chrome 124.0.6367.79

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

! Doctor found issues in 1 category.

@huycozy huycozy added 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 24, 2024
@Piinks Piinks added 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 10, 2024
Fix #147253
Fix #147516

Resubmitted #147285 because I accidentally added reviewer as contributor in a commit by using Github "add suggestion to batch". Which causing CLA check to fail and I cannot revert it.

I use exact match of label instead of contains to minimise possible change in actual user search.
I added the new test after the original keyboard navigation test to avoid merge conflict with another incoming PR.
Let me know if I need to make any changes.

Sorry for the inconvenience, I am new to the process.
@huycozy huycozy added the r: fixed Issue is closed as already fixed in a newer version label May 11, 2024
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 May 25, 2024
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
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
3 participants