Fluentui: Panel causes focus on first input type element if "onRenderNavigation" prop is added

[vasilevach]

Environment Information

• Fabric: 6.106.3
• Chrome (71.0.3578.98) High Sierra

Please provide a reproduction of the bug in a codepen:

https://codepen.io/anon/pen/GPqYmM

Actual behavior:

When the Panel is opened, it focuses and opens the calendar component.

Expected behaviour:

It should be up to the developer if the children in the Panel have focus. However this behaviour is only experienced if the onRenderNavigation is active.

Priorities and help requested:

Are you willing to submit a PR to fix? No

Requested priority: Normal

[ecraig12345]

Thanks for reporting and for providing a codepen! What's happening here is that the FocusTrapZone inside the panel automatically focuses the first focusable element by default. That will be the close button with the default navigation rendering, but if you render a custom navigation without a focusable element, focus will go to the first focusable child of the panel body (in this case the date picker) instead.

There's actually a way to disable this behavior already, by setting focusTrapZoneProps.disableFirstFocus to true:

<Panel
  // ...
  focusTrapZoneProps={{ disableFirstFocus: true }}
  >

(full example, FocusTrapZone props documentation)

Let me know if this helps!

[vasilevach]

Hey Elizabeth,

Thank you for your prompt answer!

I am closing this bug as it is a "feature" :)

Best!