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

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!

Start at the ModernTaxonomyPicker entry point and inspect how its existing panel-related props are passed to the Fluent UI Panel. Compare the proposed dedicated prop and grouped panelProps API, including compatibility with panelTitle, customPanelWidth, and isLightDismiss. Done means callers can configure onOuterClick and the dialog/panel dismissal scenario no longer dismisses both controls.