Panel: Panel & Dialog both are opened. Now click some where outside panel closes.

[siddarthkanted]

Environment Information

• Package version(s): (latest)
• Browser and OS versions: (Chrome and Windows 10)

Please provide a reproduction of the bug in a codepen: https://codepen.io/sidmanraj/pen/yQqRBx

Actual behavior:

• Click Open Panel button
• Panel opens.
• Click Open Confirm button.
• Click some where outside the Panel & Dialog area.
• Panel closes automatically.
• Dialog remains open.

Expected behavior:

• Click Open Panel button
• Panel opens.
• Click Open Confirm button.
• Click some where outside the Panel & Dialog area.
• Panel should not close automatically.
• Dialog remains open.

Priorities and help requested:

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

Requested priority: (High)

Products/sites affected: (if applicable) Microsoft Workplace Analytics

[aftab-hassan]

@siddarthkanted Thank you for filing the bug, and the awesome repro steps. Working on the fix.

[KevinTCoughlin]

@tacambridge it looks like this behavior was introduced as part of #5422, specifically mentioned here #5422 (comment)

Is the behavior reported by @siddarthkanted above expected? If not, any guidance on a fix?

[aftab-hassan]

@tacambridge it looks like this behavior was introduced as part of #5422, specifically mentioned here #5422 (comment)

Is the behavior reported by @siddarthkanted above expected? If not, any guidance on a fix?

@tacambridge Could you please help confirm if the behavior above is expected. I do have a fix for the requested behavior in this PR, however, based on the comment @KevinTCoughlin linked to, the behavior looks like expected.

Here is a screen recording of the fix, if it is the behavior we want to go with.

[aftab-hassan]

@siddarthkanted while we're waiting to hear back on whether the behavior you reported is by design, here are a couple suggestions in the interim.

1. Use the fix from this PR and modify Panel.base.tsx to not dismiss the panel

private _dismissOnOuterClick(ev: any): void {
     const panel = this._panel.current;
     if (this.state.isOpen && panel) {
       if (!elementContains(panel, ev.target)) {
        if (this.props.onOuterClick) {
          this.props.onOuterClick();
          ev.preventDefault();
        }
      }
    }
   }

2. Along with the props that you pass to the Panel, also pass in an undefined callback onOuterClick. (Thanks @ecraig12345 for suggesting this)

<Panel
    key="panel"
    isOpen={showPanel}
    onDismiss={this.handleDismissPanel}
    type={PanelType.custom}
    customWidth="500px"
    headerText={"My panel - why you close?"}
    onOuterClick={()=>undefined}
>

Please let us know if this unblocks, while we reach resolution on the design.

[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!

[aftab-hassan]

@siddarthkanted With regards to the above issue you posted, the behavior you observe is by design.

To add to the above suggestions, you could also move the <Confirm> to be a child of the <Panel> as @ThomasMichon suggests.
Here is a codepen

Please let us know if this solves the issue.

[micahgodbolt]

duplicate of #6476