[ModernTaxonomyPicker] Adding the possibility to pass onOuterClick prop to Panel

[Zhephyr54]

Category

[X] Enhancement

[ ] Bug

[ ] Question

Version

Please specify what version of the library you are using: [3.13.0]

Expected / Desired Behavior / Question

For my project, I am using the ModernTaxonomyPicker control with the onRenderActionButton prop to be able to add new term to open term sets. When the action button is clicked, I open a dialog ontop of the panel of the ModernTaxonomyPicker. The issue is that when the user clicks on a foreign element, the panel dismisses automatically with the dialog.

This is an issue with the Fluent UI components (see this issue) which was fixed but requires to use the onOuterClick prop of the Panel component (see this comment). However, the issue with this is that there is currently no way to pass this prop to the panel of the ModernTaxonomyPicker control.

Steps to Reproduce

• Open the panel of the ModernTaxonomyPicker control
• Open a Dialog component (Fluent UI) ontop of it
• Click anywhere on the page
• Both the dialog and the panel opened by the ModernTaxonomyPicker control are dismissed

Note

I could submit a PR to add this option but I don't know what would be the best way to add it to the current existing props:

• add a panelOnOuterClick prop that would be passed to the Panel
• add a panelProps prop that would regroup the panel specific props that are allowed to be passed to the child Panel (like the termPickerProps (IModernTermPickerProps) that extends IBasePickerProps for the picker). In this case, I see 2 options regarding the currently existing props:
  • move the already existing Panel props (panelTitle, customPanelWidth, isLightDismiss) that are exposed inside the panelProps (breaking change)
  • keep them completely separated or merge them with the panelProps (if overlapping)

What do you think?

Thanks!

[ghost]

Thank you for reporting this issue. We will be triaging your incoming issue as soon as possible.