Repository navigation
[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
Activity
exaby73 commentedon Dec 6, 2022
Hello @LasseRosenow. Thank you for filing this issue. Can you please provide the following information?
main.dartfile that can be run directly.flutter doctor -vPlease provide the information in the form of text. See how to make collapsible sections with Markdown here.
PS: Kindly refrain from mentioning team members. I know you have good intentions but as a best practice, it's better allow the team to look at this issue once it's triaged, which is why I am here :)
LasseRosenow commentedon Dec 6, 2022
Thank you for your quick response. And sorry for the ping, I will not do it again :)
So I added a minimal example that should be enough to show the issue.
exaby73 commentedon Dec 7, 2022
As per the documentation:
This is meant to be a "searchable"
TextField. I think for your usecase,DropdownButtonmakes more sense. Since there is already a widget that provides a dropdown without text input, it doesn't make sense to change this widget asDropdownMenuis not a replacement forDropdownButton.Due to the above reasons, I do not think this issue is valid, and therefore I am closing this issue. If you disagree, please comment with your reasoning and I can reopen it. Thank you
LasseRosenow commentedon Dec 7, 2022
LasseRosenow commentedon Dec 7, 2022
I don't agree.
The material design specification does not have a drop-down button. In the material 4 Specification everything is a menu and should use the menu internally.
The flutter drop-down button implementation is a mess as it draws it's own menu instead of reusing the menu widget internally like the new DropdownButton does.
Drop-down button also had a version that could be used inside a text field. I am really certain that this is indeed a replacement of that version. Also based on some discussion I was following on GitHub.
The material 3 documentation says, that a menu can be triggered by a text field. That this text field must be usable by the keyboard is "unspecified".
The native android components don't open the keyboard. See the Google contact app for example, so this new experience feels awkward inside the android material design ecosystem.
PS: you see in #115005 that the author clearly states, that
DropdownMenuis an update to theDropdownButton. I am sure, thatDropdownButtonwill be deprecated in time as it should.LasseRosenow commentedon Dec 7, 2022
Okay I spend some more time reading the material design 3 guidelines and actually find proof that the guidelines would not show the keyboard on touch by default. Because every example video does not.
Like this for example:
l01ijuvs-menu_usage_3P_2.mp4
Source: https://m3.material.io/components/menus/guidelines
LasseRosenow commentedon Dec 7, 2022
In general it seems that this "filtering" is more a special use case as the specification speaks about it:
exaby73 commentedon Dec 7, 2022
Thanks for the information :) I will label this issue for further insights and discussion from the team
github-actions commentedon Mar 3, 2023
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 -vand a minimal reproduction of the issue.