ModernTaxonomyPicker: Style problem - term list overflows panel footer

[diabhoil]

Category

[ ] Enhancement

[X] Bug

[ ] Question

Version

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

Expected / Desired Behavior / Question

The buttons in the footer of the picker panel should be not "above" the term list. There should be a clear separation.

Observed Behavior

In a long list, the individual elements are located below the button bar.

Steps to Reproduce

Create a blank SPFx Solution (v1.19.0), add this package, add basic ModernTaxonomyPicker somewhere in the tsx component (example code below). Add valid termSetId for a larger term set. Serve the webpart (via gulp serve), include on SharePoint page and open the "add term panel" of the picker.

For example

import * as React from 'react';
import type { ISimpleMtpSampleProps } from './ISimpleMtpSampleProps';
import { ModernTaxonomyPicker } from '@pnp/spfx-controls-react/lib/ModernTaxonomyPicker';

export default class SimpleMtpSample extends React.Component<ISimpleMtpSampleProps, {}> {
  public render(): React.ReactElement<ISimpleMtpSampleProps> {
    const {
      termId, context
    } = this.props;

    return (
      <section>
        <ModernTaxonomyPicker allowMultipleSelections={true}
                    termSetId={termId}
                    panelTitle="Select a term"
                    label={"Test"}
                    context={context as any}
                />
      </section>
    );
  }
}

[github-actions[bot]]

Thank you for submitting your first issue to this project.

[Ateina]

After a quick investigation, I noticed a potential issue related to Fluent UI Panel. For reference, a similar problem is described in this issues: https://github.com/microsoft/fluentui/issues/28057 https://github.com/microsoft/fluentui/issues/20637

[michaelmaillot]

Hi @diabhoil,

Thanks for raising this.

And thanks to you @Ateina for linking to Fluent UI issues. After some research, it seems that the issue was still in place until resolved here. This has been included in version 8.122.3 and we're currently using 8.106.4.

We'll let you know once we've bumped Fluent UI to recent version.