[DropdownMenu] Disable text input #116587
Description
Kindly marking @QuncCccccc as I think the widget is developed by you? :)
In general the new DropDown menu is really good. I am happy to finally have a good and modern replacement for the old DropdownButton.
But I find that it's behavior to always open the keyboard even on mobile is a bit annoying especially in small menus with < 10 options to select from. There is no real benefits from opening the keyboard and it makes the user experience a bit worse by moving the menus around and massively reducing the screen space.
I think having the ability to use the keyboard in general is a good idea, especially with hardware keyboards, but on mobile it is a not so good default.
Example code
CLICK ME
import 'package:flutter/material.dart';
void main() => runApp(DropdownMenuExample());
class DropdownMenuExample extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData(useMaterial3: true, colorSchemeSeed: Colors.green),
home: const Scaffold(
body: SafeArea(
child: DropdownMenu<String>(
initialSelection: "yellow",
label: const Text('Color'),
dropdownMenuEntries: [
DropdownMenuEntry<String>(
value: "red",
label: "Red",
),
DropdownMenuEntry<String>(
value: "yellow",
label: "Yellow",
),
DropdownMenuEntry<String>(
value: "green",
label: "Green",
),
DropdownMenuEntry<String>(
value: "blue",
label: "Blue",
),
DropdownMenuEntry<String>(
value: "purple",
label: "Purple",
),
DropdownMenuEntry<String>(
value: "black",
label: "Black",
),
],
),
),
),
);
}
}Possible solutions ordered by my preference:
a)
- Disable the keyboard input on touch events.. only show on mouse click.
- Add possibility to manually overwrite this behavior with some flag
b)
- Disable the keyboard input for small lists (< 10 items)
- Add possibility to manually overwrite this behavior with some flag
c)
- keep as is, but enable possibility to manually overwrite this his behavior with some flag