ContextualMenu - components inside customized menu cannot be keyboard focused

[haixiehx]

Environment Information

• Package version(s): fluent ui 7.176.2
• Browser and OS versions: Windows 10 Version 21H1

Describe the issue:

I am trying to use ContextualMenu to show a customized menu item (e.g. items: [{key: 'content', onRender: this.renderContent }]). Inside the custom method, we show "SearchBox", "Pivot/PivotItem", "ActionButton", "DetailsList" etc..

The contextual menu renders good, however, I couldn't TAB though PivotItem and "DetailsList" (they were totally skipped by keyboard). Seems like there're some code in ContextualMenu is changing tabIndex to -1 automatically.

Please provide a reproduction of the issue in a codepen:

This is a reproduction of this issue in a codepen: https://codepen.io/haixiehx/pen/YzxwWxJ

Actual behavior:

Pivot/PivotItem and "DetailsList" are skipped by keyboard inside customized menu of a ContextualMenu.

Expected behavior:

All of the focusable components inside customized menu of a ContextualMenu should be able to focus by keyboard. There should be no difference with putting those components in other types of containers.

[gouttierre]

@haixiehx - Thanks for filing this issue with us. To set expectations the developers will review this issue once capacity allows.

@khmakoto - Would you be able to confirm if this is a regression, or if this behavior is an issue? cc @smhigley

[smhigley]

@haixiehx the Fluent ContextualMenu component is a menu, which means that it can only contain menu items (both in terms of semantics and interaction). This isn't a Fluent restriction -- it's a base requirement of menu semantics. For that reason, the Fluent ContextualMenu's item onRender prop is only intended for use with presentational, non-interactive content.

For something like what you have in your codepen, you would need to use the Callout component -- I'd recommend the FocusTrap variation in the last example.

[msft-fluent-ui-bot]

Because this issue has not had activity for over 180 days, we're automatically closing it for house-keeping purposes.

Still require assistance? Please, create a new issue with up-to date details.