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

[dbahnms]

Thanks for debugging!!!

Unfortunately, it's not that easy to implement due to some dependencies. Is there a time frame when it could be fixed?

Currently the following workaround works:

• modify css with:

:global { div.ui-popup__content:has(> div.ui-popup__content__content > div.extended-toolbar__filters-menu) { z-index: 1000000; } }

[michaelmaillot]

Hi @dbahnms,

The Toolbar control is using the react-northstar Popup component under the hood, which by design doesn't provide a prop to handle its CSS properties.

The only path I would search for is on the Fluent UI Panel side which you can customize through layerProps or popupProps. But at this point, I don't have working example to provide.

Another way to achieve this would be to replace the Toolbar control by the Fluent UI CommandBar or ContextualMenu.

We won't be able to fix this due to the nature of the component.

[michaelmaillot]

Closing this, feel free to reopen it if needed.