[Bug]: The Callout onDismiss handler is not triggered when clicking a different iframe

[MemMaoxin]

Library

React / v8 (@fluentui/react)

System Info

Package version(s): "@fluentui/[email protected]"
Browser and OS versions: Microsoft edge/Version 110.0.1587.49

Are you reporting Accessibility issue?

None

Reproduction

https://codepen.io/xinxinZZZ/pen/gOdPqQN?editors=1111

Bug Description

Steps:

1. Open codepen: https://codepen.io/xinxinZZZ/pen/gOdPqQN?editors=1111
2. Press the show callout button. A callout should appear.
3. Click the square box (iframe). Notice that the callout does not disappear and onDismiss handler is not called.

Actual Behavior

When clicking inside an iframe (but outside of the callout), the callout is not dismissed.

Expected Behavior

When clicking outside the callout, the onDismiss handler should be triggered, and the callout should disappear.

Possible Cause

I think the reason is the method "dismissOnTargetWindowBlur" handle the evt incorrectly in https://github.com/microsoft/fluentui/blame/master/packages/react/src/components/Callout/CalloutContent.base.tsx.

When we click inside an iframe, the result of "targetWindow.document.hasFocus()" is true, so the onDismiss method in 348 lines wouldn't be executed.
So we should add this logic as follows:
if ( ((preventDismissOnEvent && !preventDismissOnEvent(ev)) || (!preventDismissOnEvent && !preventDismissOnLostFocus)) && (!targetWindow?.document.hasFocus() || ev.target === targetRef.current) && ev.relatedTarget === null ) { onDismiss?.(ev); }

Logs

No response

Requested priority

Blocking

Products/sites affected

Updates App and Approvals App in Teams

Are you willing to submit a PR to fix?

yes

Validations

• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• The provided reproduction is a minimal reproducible example of the bug.

[micahgodbolt]

Duplicate of #22133

[MemMaoxin]

Hi @micahgodbolt, I have careted a pr to solve this problem: #26930. Please help review, thanks!

[msft-fluent-ui-bot]

Because this issue is marked as a duplicate and has not had activity for over 3 days, we're closing this issue for house-keeping purposes. Please refer to the issue that this issue was duplicated to for the purposes of tracking progress. Thank you.