Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Closed
davidhicks980 opened this issue Feb 29, 2024 · 2 comments · Fixed by #150950
Closed

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

davidhicks980 opened this issue Feb 29, 2024 · 2 comments · Fixed by #150950
Labels
r: duplicate Issue is closed as a duplicate of an existing issue

Comments

@davidhicks980
Copy link
Contributor

davidhicks980 commented Feb 29, 2024 •
edited
Loading

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!
@davidhicks980 davidhicks980 changed the title [material/menu_anchor.dart] [material/menu_anchor.dart] Tab focus stopped at SubmenuButton Feb 29, 2024
@huycozy huycozy added the in triage Presently being triaged by the triage team label Mar 1, 2024
@huycozy
Copy link
Member

huycozy commented Mar 1, 2024

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!

@huycozy huycozy closed this as not planned Won't fix, can't repro, duplicate, stale Mar 1, 2024
@huycozy huycozy added r: duplicate Issue is closed as a duplicate of an existing issue and removed in triage Presently being triaged by the triage team labels Mar 1, 2024
@huycozy huycozy mentioned this issue Mar 1, 2024
Open
@github-actions GitHub Actions
Copy link

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.

@github-actions github-actions bot locked as resolved and limited conversation to collaborators Mar 15, 2024
auto-submit bot pushed a commit that referenced this issue Aug 6, 2024
@davidhicks980
[material/menu_anchor.dart] MenuAnchor focus refactoring for RawMenuA…
faabe3a 
…nchor (#150950)

This PR is aimed at (1) reducing the private API surface of _MenuAnchorState to make migration into RawMenuAnchor simpler, and (2) fixing focus-related bugs. 

Directional focus handling was moved from MenuAnchor (_MenuDirectionalFocusAction, _MenuNextFocusAction, and _MenuPreviousFocusAction) into SubmenuButton (_SubmenuDirectionalFocusAction). MenuAnchor now behaves similarly to a flat FocusScope, which makes it easier to customize. A future PR will ideally expose or remove the remaining internals (_lastItemFocusNode, _firstItemFocusNode, _isRoot, etc). All previous framework tests are passing, and additional tests were added for fixes (MenuAnchor tab traversal, reopened menus not being focusable), and to test MenuAnchor focus behavior separately from MenuBar. 

However, [one example test](https://github.com/flutter/flutter/pull/150950/files#diff-a33fa01b59d280784e7c8ed6b704bd005cde95b7d3b649dc82fd58530061a09d) had to be changed. I'm not sure why the previous example test was working to begin with, as submenu buttons are supposed to open on focus, but this behavior was not observed in the original test. 

Fixes #144381, #150334.

One added feature is the ability to move between top-level horizontal submenus if a horizontal movement is made on a vertical menu item that has no children in the movement direction. This behavior was observed on Google Docs, MacOS, and various other menu systems I encountered.

https://github.com/flutter/flutter/assets/59215665/04a42b8a-cc9e-4a50-9d0c-6f2d784cfc78
TytaniumDev pushed a commit to TytaniumDev/flutter that referenced this issue Aug 7, 2024
@davidhicks980 @TytaniumDev
[material/menu_anchor.dart] MenuAnchor focus refactoring for RawMenuA…
b575492 
…nchor (flutter#150950)

This PR is aimed at (1) reducing the private API surface of _MenuAnchorState to make migration into RawMenuAnchor simpler, and (2) fixing focus-related bugs. 

Directional focus handling was moved from MenuAnchor (_MenuDirectionalFocusAction, _MenuNextFocusAction, and _MenuPreviousFocusAction) into SubmenuButton (_SubmenuDirectionalFocusAction). MenuAnchor now behaves similarly to a flat FocusScope, which makes it easier to customize. A future PR will ideally expose or remove the remaining internals (_lastItemFocusNode, _firstItemFocusNode, _isRoot, etc). All previous framework tests are passing, and additional tests were added for fixes (MenuAnchor tab traversal, reopened menus not being focusable), and to test MenuAnchor focus behavior separately from MenuBar. 

However, [one example test](https://github.com/flutter/flutter/pull/150950/files#diff-a33fa01b59d280784e7c8ed6b704bd005cde95b7d3b649dc82fd58530061a09d) had to be changed. I'm not sure why the previous example test was working to begin with, as submenu buttons are supposed to open on focus, but this behavior was not observed in the original test. 

Fixes flutter#144381, flutter#150334.

One added feature is the ability to move between top-level horizontal submenus if a horizontal movement is made on a vertical menu item that has no children in the movement direction. This behavior was observed on Google Docs, MacOS, and various other menu systems I encountered.

https://github.com/flutter/flutter/assets/59215665/04a42b8a-cc9e-4a50-9d0c-6f2d784cfc78
Buchimi pushed a commit to Buchimi/flutter that referenced this issue Sep 2, 2024
@davidhicks980 @Buchimi
[material/menu_anchor.dart] MenuAnchor focus refactoring for RawMenuA…
58ed997 
…nchor (flutter#150950)

This PR is aimed at (1) reducing the private API surface of _MenuAnchorState to make migration into RawMenuAnchor simpler, and (2) fixing focus-related bugs. 

Directional focus handling was moved from MenuAnchor (_MenuDirectionalFocusAction, _MenuNextFocusAction, and _MenuPreviousFocusAction) into SubmenuButton (_SubmenuDirectionalFocusAction). MenuAnchor now behaves similarly to a flat FocusScope, which makes it easier to customize. A future PR will ideally expose or remove the remaining internals (_lastItemFocusNode, _firstItemFocusNode, _isRoot, etc). All previous framework tests are passing, and additional tests were added for fixes (MenuAnchor tab traversal, reopened menus not being focusable), and to test MenuAnchor focus behavior separately from MenuBar. 

However, [one example test](https://github.com/flutter/flutter/pull/150950/files#diff-a33fa01b59d280784e7c8ed6b704bd005cde95b7d3b649dc82fd58530061a09d) had to be changed. I'm not sure why the previous example test was working to begin with, as submenu buttons are supposed to open on focus, but this behavior was not observed in the original test. 

Fixes flutter#144381, flutter#150334.

One added feature is the ability to move between top-level horizontal submenus if a horizontal movement is made on a vertical menu item that has no children in the movement direction. This behavior was observed on Google Docs, MacOS, and various other menu systems I encountered.

https://github.com/flutter/flutter/assets/59215665/04a42b8a-cc9e-4a50-9d0c-6f2d784cfc78
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees
No one assigned
Labels
r: duplicate Issue is closed as a duplicate of an existing issue
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

[material/menu_anchor.dart] MenuAnchor focus refactoring for RawMenuAnchor davidhicks980/flutter
2 participants
@davidhicks980 @huycozy