flutter
DropdownMenu doesn't fire onSelected from keyboard navigation
STEPS TO REPRODUCE
- Run the program below.
- Tab until the dropdown menu is focused. (Side note: this seems to take an inordinate number of tabs given that there's only two focusable controls on the screen, but that's another bug.)
- Press enter to open the menu.
- Hit down arrow to highlight "Foo.aa".
- Press enter to select "Foo.aa".
EXPECTED RESULTS
Selected value becomes "Foo.aa".
ACTUAL RESULTS
Selected value remains "null".
CODE FOR TEST PROGRAM
import 'package:flutter/material.dart';
void main() {
runApp(const MaterialApp(home: MyHomePage()));
}
enum Foo { aa, bb, cc }
class MyHomePage extends StatefulWidget {
const MyHomePage({super.key});
@override
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
Foo? _value;
@override
Widget build(BuildContext context) {
return Material(
child: Column(
children: [
Text('Selected value: $_value'),
DropdownMenu<Foo>(
onSelected: (Foo? value) {
setState(() {
_value = value;
});
},
dropdownMenuEntries: Foo.values
.map<DropdownMenuEntry<Foo>>(
(Foo f) => DropdownMenuEntry(value: f, label: '$f'),
)
.toList(),
),
],
),
);
}
}
Hi @Hixie I tried to reproduce this issue and I am getting the expected result i.e. Selected value becomes "Foo.aa".
can you share logs from your debug console while running the app
Nothing on the console. Are you testing with the keyboard? It works fine with the mouse or touch, it's only keyboard input that's broken. I've tested this in macOS and Linux, here's the doctor output for Linux:
[✓] Flutter (Channel main, 3.20.0-10.0.pre.21, on Ubuntu 22.04.3 LTS 5.15.0-88-generic, locale C.UTF-8)
• Flutter version 3.20.0-10.0.pre.21 on channel main at /home/ianh/dev/flutter
• Upstream repository [email protected]:flutter/flutter.git
• Framework revision df4205e104 (22 minutes ago), 2024-02-16 18:06:28 -0500
• Engine revision 2eed3fbb29
• Dart version 3.4.0 (build 3.4.0-150.0.dev)
• DevTools version 2.33.0-dev.6
[✓] Android toolchain - develop for Android devices (Android SDK version 33.0.1)
• Android SDK at /home/ianh/Android/Sdk
• Platform android-34, build-tools 33.0.1
• Java binary at: /home/ianh/bin/android-studio/jre/bin/java
• Java version OpenJDK Runtime Environment (build 11.0.10+0-b96-7249189)
• All Android licenses accepted.
[✓] Chrome - develop for the web
• Chrome at google-chrome
[✓] Linux toolchain - develop for Linux desktop
• Ubuntu clang version 14.0.0-1ubuntu1.1
• cmake version 3.22.1
• ninja version 1.10.1
• pkg-config version 0.29.2
[✓] Android Studio (version 2020.3)
• Android Studio at /home/ianh/bin/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 11.0.10+0-b96-7249189)
[✓] IntelliJ IDEA Community Edition (version 2022.1)
• IntelliJ at /home/ianh/bin/idea-IC-221.5921.22
• 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
[✓] Connected device (2 available)
• Linux (desktop) • linux • linux-x64 • Ubuntu 22.04.3 LTS 5.15.0-88-generic
• Chrome (web) • chrome • web-javascript • Google Chrome 119.0.6045.159
[✓] Network resources
• All expected network resources are available.
• No issues found!
yes I tried it by using keyboard on linux and It's working fine for me. I first build the application on Linux and then I clicked on the field to add test that it shows the drop down after that i used my keyboard down array to go the my desired selection that pressed enter and everything was working as expected .
Please correct me if I am doing something wrong to reproduce the issue
What happens if you don't use the mouse at all, and rely on the keyboard to open the menu? That's what the steps to reproduce in the OP say to do.
@Hixie it works fine by following your given steps . I used TAB to get the focus on that field than I type one letter to get the drop down as drop down doesn't open by itself when I get the focus by use TAB
What about if you press enter, rather than a letter?
Works perfectly fine
There are some weird things happening here on main, for sure. It appears that the menu items are focusable even when the menu isn't visible, so hitting tab and then enter selects Foo.aa even though the menu never appeared. It does set the value, though.
Details
[✓] Flutter (Channel main, 3.20.0-15.0.pre.27, on Debian GNU/Linux rodete 6.5.13-1rodete2-amd64, locale en_US.UTF-8)
• Flutter version 3.20.0-15.0.pre.27 on channel main at /usr/local/google/home/gspencer/code/flutter
• Upstream repository [email protected]:flutter/flutter.git
• Framework revision d675807052 (27 minutes ago), 2024-02-28 17:19:08 +0000
• Engine revision 91898e3972
• Dart version 3.4.0 (build 3.4.0-186.0.dev)
• DevTools version 2.33.0-dev.11
Seems to also be broken on stable (at least the part about not showing the menu items before selecting them).
Same here. Focusing the trigger icon with TAB, pressing ENTER, then browsing the options with UP/DOWN and finally picking one with ENTER doesn't change the selected value.
Here's a screen recording of the issue:
https://github.com/flutter/flutter/assets/261458/d12d9dc2-9614-41b1-a58d-3653d6bc6357
The recorded video corresponds to the following flutter program which is very similar to what the OP used.
Flutter code
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'),
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({super.key, required this.title});
final String title;
@override
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
int? _selectedEntry;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text("Selected Entry: $_selectedEntry"),
const SizedBox(height: 15),
DropdownMenu<int>(
initialSelection: _selectedEntry,
dropdownMenuEntries: const [
DropdownMenuEntry(
value: 0,
label: 'Zero',
),
DropdownMenuEntry(
value: 1,
label: 'One',
),
DropdownMenuEntry(
value: 2,
label: 'Two',
),
],
onSelected: (value) {
setState(() {
_selectedEntry = value;
});
},
),
],
),
),
);
}
}
flutter doctor -v
> 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 (5 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.63
• Edge (web) • edge • web-javascript • Microsoft Edge 124.0.2478.51
[✓] Network resources
• All expected network resources are available.
• No issues found!
