Skip to content

[material/menu_anchor.dart] Tab focus stopped at SubmenuButton #144381

Description

@davidhicks980

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
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'),
            );
          },
        ),
      ],
    );
  }
}

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
[✓] Flutter (Channel master, 3.19.0-2.0.pre.14, on macOS 14.0 23A344 darwin-arm64, locale en-US)
    • Flutter version 3.19.0-2.0.pre.14 on channel master at /Users/davidhicks/fvm/versions/master
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 29db9dbd44 (7 weeks ago), 2024-01-08 23:24:31 -0500
    • Engine revision 820645dbcc
    • Dart version 3.4.0 (build 3.4.0-4.0.dev)
    • DevTools version 2.31.0

[✓] Android toolchain - develop for Android devices (Android SDK version 33.0.0)
    • Android SDK at /Users/davidhicks/Library/Android/sdk
    • Platform android-34, build-tools 33.0.0
    • ANDROID_HOME = /Users/davidhicks/Library/Android/sdk
    • Java binary at: /Applications/Android Studio.app/Contents/jbr/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 17.0.7+0-17.0.7b1000.6-10550314)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 15.2)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Build 15C500b
    • CocoaPods version 1.15.2

[✓] Chrome - develop for the web
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[✓] Android Studio (version 2023.1)
    • Android Studio at /Applications/Android Studio.app/Contents
    • Flutter plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/6351-dart
    • Java version OpenJDK Runtime Environment (build 17.0.7+0-17.0.7b1000.6-10550314)

[✓] VS Code (version 1.86.2)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.83.20240201

[✓] Connected device (2 available)
    • macOS (desktop) • macos  • darwin-arm64   • macOS 14.0 23A344 darwin-arm64
    • Chrome (web)    • chrome • web-javascript • Google Chrome 122.0.6261.69
    ! Error: Browsing on the local area network for David’s iPhone. Ensure the device is unlocked and attached with a
      cable or associated with the same local area network as this Mac.
      The device must be opted into Developer Mode to connect wirelessly. (code -27)

[✓] Network resources
    • All expected network resources are available.

• No issues found!

Activity

  1. changed the title [-][material/menu_anchor.dart] [/-] [+][material/menu_anchor.dart] Tab focus stopped at SubmenuButton[/+] on Feb 29, 2024
  2. added
    in triagePresently being triaged by the triage team
    on Mar 1, 2024
  3. huycozy commented on Mar 1, 2024

    @huycozy
    Member

    Thanks for the report. I can reproduce the issue but I found there was one issue that is quite similar to this: #119532. I will close this in favor of that one, please follow up on it for updates. Thanks!

  4. added
    r: duplicateIssue is closed as a duplicate of an existing issue
    and removed
    in triagePresently being triaged by the triage team
    on Mar 1, 2024
  5. github-actions commented on Mar 15, 2024

    @github-actions

    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 -v and a minimal reproduction of the issue.

  6. locked as resolved and limited conversation to collaborators on Mar 15, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    r: duplicateIssue is closed as a duplicate of an existing issue

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions