-
Notifications
You must be signed in to change notification settings - Fork 29.7k
Description
Internal: b/140831334
If you have a dropdown (DropdownButton and DropdownMenuItems) below a Navigator in a MaterialApp, it breaks the screenreader focus behavior.
The problem is that when you activate the dropdown button, focus gets lost instead of going to the selected item in the popup. Sometimes it works properly the first time you open the popup, but not subsequent times. One strange thing I noticed (TalkBack only) was that if you navigate backwards three times in this state, it will successfully focus on the last element, but navigating forwards from this state never focuses on anything. Also, when you select an item and the popup closes, focus gets lost instead of returning to the button.
If the dropdown does not have a Navigator in its ancestry, it doesn't have this problem.
Our app does have a page where the dropdown focus works correctly even though it has a Navigator in the tree above the dropdown. This gives me hope that there may be some kind of workaround for the issue. However, I haven't been able to isolate what makes this different from the repro case below because the app's tree has many layers.
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: Navigator(
onGenerateRoute: (_) {
return MaterialPageRoute(
builder: (context) {
return Scaffold(
body: SafeArea(
child: DropdownButton(
value: "foo",
items: [
DropdownMenuItem(value: "foo", child: Text("Foo"),),
DropdownMenuItem(value: "bar", child: Text("Bar"),),
],
onChanged: (_) {},
),
),
);
},
);
},
),
);
}
}
Tested on both Android and iOS. Issue is present on both.