Unverified Commit c2b1e483 authored by huycozy's avatar huycozy Committed by GitHub

Improve DropdownMenu sample code for requestFocusOnTap on mobile platforms (#134867)

### Description

This PR is to improve `DropdownMenu` sample code. By default, `requestFocusOnTap` is false on mobile platforms. When users run API sample code on mobile platforms, they can not edit the text field and think it is a bug. Although it is detailed at https://api.flutter.dev/flutter/material/DropdownMenu/requestFocusOnTap.html, users often do not pay attention to it.

### Related issue

Fixes https://github.com/flutter/flutter/issues/127672
parent b03f5337
......@@ -74,6 +74,11 @@ class _DropdownMenuExampleState extends State<DropdownMenuExample> {
DropdownMenu<ColorLabel>(
initialSelection: ColorLabel.green,
controller: colorController,
// requestFocusOnTap is enabled/disabled by platforms when it is null.
// On mobile platforms, this is false by default. Setting this to true will
// trigger focus request on the text field and virtual keyboard will appear
// afterward. On desktop platforms however, this defaults to true.
requestFocusOnTap: true,
label: const Text('Color'),
onSelected: (ColorLabel? color) {
setState(() {
......@@ -97,6 +102,7 @@ class _DropdownMenuExampleState extends State<DropdownMenuExample> {
DropdownMenu<IconLabel>(
controller: iconController,
enableFilter: true,
requestFocusOnTap: true,
leadingIcon: const Icon(Icons.search),
label: const Text('Icon'),
inputDecorationTheme: const InputDecorationTheme(
......
......@@ -52,4 +52,26 @@ void main() {
expect(find.text('You selected a Blue Smile'), findsOneWidget);
});
testWidgets('DropdownMenu has focus when tapping on the text field', (WidgetTester tester) async {
await tester.pumpWidget(
const example.DropdownMenuExample(),
);
// Make sure the dropdown menus are there.
final Finder colorMenu = find.byType(DropdownMenu<example.ColorLabel>);
final Finder iconMenu = find.byType(DropdownMenu<example.IconLabel>);
expect(colorMenu, findsOneWidget);
expect(iconMenu, findsOneWidget);
// Tap on the color menu and make sure it is focused.
await tester.tap(colorMenu);
await tester.pumpAndSettle();
expect(FocusScope.of(tester.element(colorMenu)).hasFocus, isTrue);
// Tap on the icon menu and make sure it is focused.
await tester.tap(iconMenu);
await tester.pumpAndSettle();
expect(FocusScope.of(tester.element(iconMenu)).hasFocus, isTrue);
});
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment