Fluentui: Keyboard navigation not working for ContextualMenu if custom render contains TextField/DatePicker

[Anschur]

Environment Information

• __Package version(s)__: (fill this out)
• __Browser and OS versions__: (fill this out if relevant)

Please provide a reproduction of the bug in a codepen:

If the ContextualMenu has custom render that includes a TextField (or a DatePicker) the keyboard navigation will not work when arrowing. In the examples below my menu has a 3 menu items, but also 2 DatePicker-components and a Button. Arrowing down will move through the menu items and reach the first DatePicker. But it will then wrap around to the top again. Arrowing up on the other hand will only cycle between the lower most DatePicker and the Button. Tabbing will move through all the elements on in the menu.

Codepen using onRenderMenuList: https://codepen.io/anders-sch-rmann/pen/WmYELR
Codepen using onRender: https://codepen.io/anders-sch-rmann/pen/RdqxLO

Actual behavior:

Down arrow gets "stuck" in the first Textfield.

Expected behavior:

Arrowing to go through all results as with tabbing

Priorities and help requested:

Are you willing to submit a PR to fix? (Yes, No)

Requested priority: (Blocking, High, Normal, Low)

Products/sites affected: (if applicable)

[khmakoto]

Hi @Anschur, I can confirm that this is also reproing for me. I'll take a look into this. Thanks for raising awareness on this issue!

[Anschur]

Hi @khmakoto. Thanks for your feedback :) Do you have any idea about an ETA for a fix on this? Depending on how long this will take we will have to consider our options with regards to doing another implementation or redesign.

[khmakoto]

I'll try to get a fix by the end of next week. I'll update here if I get it before then.

[Anschur]

Hi @khmakoto! I found a property on FocusZone named shouldInputLoseFocusOnArrowKey that seems to have resolved this issue :) When set to return true, arrowing will inlude all the input fields.

[khmakoto]

Hi @Anschur, great to know that you found a fix! Thanks for letting me know!

If there is anything else I can help you with please let me know. If not, it would be great if you could close the issue. Thanks!!

[Anschur]

Oh, yes there are probably loads of stuff you could help me with :) - But I will close this issue for now. Thanks :)