Fluentui: Panel onDismiss called when Dialog closed

[butchmarshall]

Reproduced here: https://codepen.io/anon/pen/oPKgpx

Bug Report

• //unpkg.com/office-ui-fabric-react/dist/office-ui-fabric-react.min.js
• Chrome

Priorities and help requested:

Are you willing to submit a PR to fix? (No)

Requested priority: (Blocking)

Describe the issue:

When Dialog is closed onDismiss for panel is called.

In the reproduction:

1. Click Open Panel
2. Click Open Confirm
3. Click Save/Confirm on the open Dialog

The Panel will also have its onDismiss function called

Expected behavior:

Panel onDismiss should not be called when Dialog is closed.

This may be related to https://github.com/OfficeDev/office-ui-fabric-react/issues/6029? Both Layers seem to appear at the same level and the Panel layer is above the Dialog layer.

Placing the Dialog inside the rendering context of the Panel https://codepen.io/anon/pen/RYXPPx seems to work around the issue

[KevinTCoughlin]

Thank you for the detailed report @butchmarshall and repro examples!

Confirming with the team, but this seems like a bug. Clicking anywhere including the Dialog body closes the Panel behind the Dialog layer when it isn't rendered within the Panel component. cc: @JasonGore to be sure re: tagging this as 🐛.

[JasonGore]

I took a quick glance but don't see anything obvious. This bug has been around for a long time, before Portals, and at least as far back as v6.20.0.

[KevinTCoughlin]

I took a quick glance but don't see anything obvious. This bug has been around for a long time, before Portals, and at least as far back as v6.20.0.

Thank you for checking the history of this bug @JasonGore! Good to know it predates the Portals change 👍. Should help us in tracking this one down.

[frevds]

The problem is that the panel dismisses whenever a click is caught outside its own modal layer.
In the above example it is enough to click inside the dialog message (not on the buttons).

I trapped a panel into custom dimensions using a Customizer so it does not show fullscreen and although isLightDismiss=false and isBlocking=true and hasCloseButton=false I can dismiss it just by clicking outside of that trap area. A mouse down outside the area is enough, the panel dismisses even if the mouse is released within the area then.

[frevds]

Easiest Workaround:

add this handler and the issue will disappear:

<Panel onOuterClick={ () => {} }>

[micahgodbolt]

Yeah, since the dialog is outside of the panel it is considered an outerclick, and therefore closes the panel

Since dialogs will always be rendered in a layer, you can gate outer clicks via onOuterClick (as @frevds said). i.e. there isn't a simple way to know that this dialog came from the panel and to consider it panel content.

[msft-github-bot]

This issue has been automatically marked as stale because it has marked as requiring author feedback but has not had any activity for 4 days. It will be closed if no further activity occurs within 3 days of this comment. Thank you for your contributions to Fabric React!

[frevds]

The workaround works, but it is not a desired solution and it certainly shouldn't be like that by design because it is inconsistent to open a modal panel - which by definition is a panel that has no outer zones to click on that close it. Modal means that all other UI interaction is supposedly blocked, and UI in the foreground is considered content from a user perspective. It is also incompatible with component paradigms where the panel owner is a component potentially independent of its content components over whose implementation it has no control nor knowledge. If the content of the panel opens a dialog message, a mere click into the message closes the modal panel. This cannot be anticipated and I would consider it a bug to have a modal panel close on its own without explicit action, since this is what should not happen under any circumstances.

[makafsal]

Same issue when using onDismiss(). Because when clicking outside the panel area, it will dismiss.

` isOpen={true}
type={PanelType.large}
isLightDismiss={false}
hasCloseButton={false}
onRenderNavigationContent={this._onRenderHeaderContent}
focusTrapZoneProps={{
forceFocusInsideTrap: false
}}

`