Fluentui: Vertical OveflowSet keyboard navigation sticks on the overflow

[micahgodbolt]

Environment Information

• __Package version(s)__: current
• __Browser and OS versions__: all

Please provide a reproduction of the bug in a codepen:

https://developer.microsoft.com/en-us/fabric#/components/overflowset

Actual behavior:

arrowup and down in vertical overflow set, once you put focus on the overflow '...' you can't go back up

[joschect]

@micahgodbolt Thanks for submitting this, we'll get it added to our backlog and taken care of!

[joschect]

@micahgodbolt interestingly this is a problem with button, not with overflow. Button has some logic to detect when it should open a menu which calls preventDefault and stopPropagation This is a complicated fix because the button is kinda working as intended, although it is not correctly opening it's submenu which is a separate issue. Do you have any ideas?

[micahgodbolt]

So we can't put buttons in vertical focus groups? Aren't there vertical menus that are just a collection of buttons? Do we simply need to render our buttons in list items to avoid this issue?

[joschect]

No, we can, it's just a question of how buttons should behave. If there are menuprops in the button then normally pressing down or up will open the menu, however in the case of a vertical menu up or down should move through the items. So it might be that we need to allow for different buttons to open the menu. Or we should only allow enter to open the menu.

[micahgodbolt]

pressing down on a button doesn't do anything. "alt + down" will open the sub menu of buttons.

[joschect]

Huh, then button is broken lol. I'll get a fix going.

[joschect]

Or I should say, it shouldn't prevent default on a down press if alt isn't already currently pressed.

[msft-github-bot]

:tada:This issue was addressed in #8741, which has now been successfully released as [email protected].:tada:

Handy links:

• Release Notes
• Official NPM Release
• Test the release with Developer Demo Site

[msft-github-bot]

:tada:This issue was addressed in #8741, which has now been successfully released as [email protected].:tada:

Handy links:

• Release Notes
• Official NPM Release
• Test the release with Developer Demo Site