PnP Toolbar filter does not work inside of a panel

[dbahnms]

Category

[ ] Enhancement

[X?] Bug

[X] Question

Version

Please specify what version of the library you are using: node: 'v18.20.4', npm: '10.8.1' "@pnp/spfx-controls-react": "^3.19.0",

Code

  <Panel
    isOpen={this.state.showPanelSinglePermission}
    type={PanelType.extraLarge}
    onDismiss={this._hidePanelSinglePermission}
  >
    <div>

          <Toolbar 
            style={{marginTop: -20}}
            actionGroups={{
            'share': {
              'reload': {
                title: ls[browserlanguage].toolbars.reload,
                iconName: 'UpdateRestore',
                onClick: () => this.componentReload(this.state.filtervalue)
              }
            }
            }}

            filters={[
              {
                className: styles.combobox,
                id: "f3",
                title: ls[browserlanguage].toolbars.filter.Sharing,
                items: [
                  { id: "f3f1", title: ls[browserlanguage].toolbars.filter.Guest },
                  { id: "f3f2", title: ls[browserlanguage].toolbars.filter.Everyone },
                  { id: "f3f3", title: ls[browserlanguage].toolbars.filter.Member },
                  { id: "f3f4", title: ls[browserlanguage].toolbars.filter.Link }
                ]
              },
              {
                id: "f2",
                title: ls[browserlanguage].toolbars.filter.Library,
                items: this.state.sitelists
              }
            ]}

            onSelectedFiltersChange={this._onSelectedFiltersChange.bind(this)}
            find={true}
            onFindQueryChange={this._findItem}
          />
    </div>
  </Panel>

Expected / Desired Behavior / Question

When I use this code directly (without an panel) it works corrently.

If I embed the toolbar inside of an panel, the filter does not work and sometimes I got the following error message in my browser: Blocked aria-hidden on a element because the element that just received focus must not be hidden from assistive technology users. Avoid using aria-hidden on a focused element or its ancestor. Consider using the inert attribute instead, which will also prevent focus. For more details, see the aria-hidden section of the WAI-ARIA specification at https://w3c.github.io/aria/#aria-hidden.

How can I fix that?

Observed Behavior

Filter opened and chooseable

Steps to Reproduce

• Add an toolbar inside of an fluent ui panel

[github-actions[bot]]

Thank you for submitting your first issue to this project.

[wilecoyotegenius]

I have reproduced your scenario. It turns out that filter popup does in fact open and render properly, but it is placed below the panel due to lower z-index value (popup control has z-index: 1000, whereas panel has z-index: 1000000).

You would see the popup if you had changed z-index to a value higher than panel has:

As a quick fix, I would recommend changing your code and switching Panel from fluentui to Dialog from fluentui/react-northstar. Dialog component has z-index: 1000 and works well with nested popups. https://fluentsite.z22.web.core.windows.net/0.66.2/prototype-nested-popups-and-dialogs