import 'package:flutter/material.dart';
void main() => runApp(const MenuApp());
class MenuApp extends StatelessWidget {
const MenuApp({super.key});
@override
Widget build(BuildContext context) {
return const MaterialApp(
home: Scaffold(body: MyCascadingMenu()),
);
}
}
class MyCascadingMenu extends StatefulWidget {
const MyCascadingMenu({super.key});
@override
State<MyCascadingMenu> createState() => _MyCascadingMenuState();
}
class _MyCascadingMenuState extends State<MyCascadingMenu> {
final FocusNode _buttonFocusNode = FocusNode();
@override
Widget build(BuildContext context) {
return Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
MenuAnchor(
childFocusNode: _buttonFocusNode,
menuChildren: <Widget>[
MenuItemButton(onPressed: () {}, child: const Text('1')),
MenuItemButton(onPressed: () {}, child: const Text('2')),
SubmenuButton(
menuChildren: <Widget>[
MenuItemButton(onPressed: () {}, child: const Text('3-1')),
SubmenuButton(
menuChildren: <Widget>[
MenuItemButton(
onPressed: () {}, child: const Text('3-2-1')),
MenuItemButton(
onPressed: () {}, child: const Text('3-2-2')),
],
child: const Text('3-2'),
),
MenuItemButton(onPressed: () {}, child: const Text('3-3')),
],
child: const Text('3'),
),
SubmenuButton(
menuChildren: <Widget>[
MenuItemButton(onPressed: () {}, child: const Text('4-1')),
MenuItemButton(onPressed: () {}, child: const Text('4-2')),
],
child: const Text('4'),
),
MenuItemButton(onPressed: () {}, child: const Text('5')),
MenuItemButton(onPressed: () {}, child: const Text('6')),
],
builder: (
BuildContext context,
MenuController controller,
Widget? child,
) {
return TextButton(
focusNode: _buttonFocusNode,
onPressed: () {
if (controller.isOpen) {
controller.close();
} else {
controller.open();
}
},
child: const Text('OPEN MENU'),
);
},
),
],
);
}
}
Steps to reproduce
Open the menu, focus first item, then try tab-focusing through all items.
Expected results
Should be able to tab to the end of the menu.
Actual results
Tab focus gets trapped between the SubmenuButtons
Code sample
Code sample
Screenshots or Video
Screenshots / Video demonstration
This video is showing arrow keys versus tab keys. The parts where I am able to focus past the submenu buttons demonstrates arrow key behavior. The parts where focus is stuck demonstrates tab behavior.
Screen.Recording.2024-02-29.at.5.30.21.AM.mov
Logs
No response
Flutter Doctor output
Doctor output