CODEWITHSUNDEEP
ms-officeoffice-ui-fabricoffice-fabric
Lars
Lars

Reputation: 10573

Office Fabric: Capture clicks outside non-modal panel

Office Fabric has the concept of a "non-modal" panel: https://developer.microsoft.com/en-us/fabric#/components/panel

A non-modal panel does not show an shaded overlay over the rest of the panel, and the buttons in the non-modal area will react to hover events, however they do not respond to clicks (in the sample either)

I'm not clear on the purpose of a non-modal panel if this is not the case.

Is there a way to respond to clicks in the area outside the non-modal?

Upvotes: 0

Views: 1080

Answers (1)

orbjeff
orbjeff

Reputation: 11

You can achieve this by setting the isHiddenOnDismiss={true}.

<Panel
    isBlocking={false}
    isOpen={this.state.showPanel}
    isHiddenOnDismiss={true}
    onDismiss={this._setShowPanel(false)}
    type={PanelType.medium}
    headerText='Non-Modal Panel'
    closeButtonAriaLabel='Close'
>

I found this in the properties for the "Panel - Hidden on Dismiss". Removing this property or setting it to false will replicate your issue.

See Hidden on Dismiss Panel Example

Upvotes: 1

Related Questions