Office Fabric: Capture clicks outside non-modal panel

Question

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?

score 1 · Answer 1 · edited Mar 16 '18 at 13:43

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

Office Fabric: Capture clicks outside non-modal panel

1 Answers1