Callouts should trigger onDismiss when focus moves to an iframe on the page

[tronguye]

Environment Information

• Package version(s): 8
• Browser and OS versions: Chromium Edge Version 99.0.1150.39 (Official build) (64-bit), Windows 10

Please provide a reproduction of the bug in a codepen:

https://codepen.io/tronguye/pen/dyJYjVr

Actual behavior:

Having a callout open and clicking into an iframe sibling to it does not trigger onDismiss

Expected behavior:

onDismiss should trigger when focus moves to an iframe sibling to it. It should not dismiss when clicking to another non-iframe window

Priorities and help requested:

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

Requested priority: (Blocking, High, Normal, Low) High

Products/sites affected: (if applicable) Any FluentUI consumer that hosts iframe'd content. In the case of Microsoft, this includes all MetaOS hubs, Microsoft Loop, Teams apps, Teams embed client, etc.

[tronguye]

It appears that this is the rough history of this issue:

Issue #13036: The Callout onDismiss handler is not triggered when clicking a different iframe

• Original issue
• The default callout menu behavior is to stay open when its parent iframe gets blurred.

PR #14363: Fix: Dismiss callout when blurring to a new window

• This fix changes such that callouts are dismissed when the window gets blurred, whether that be in an iframe or another window.

Issue #15156: Need a prop in Callout component to prevent dismiss upon window changed

• As a result of the behavior change above, we see some reports from apps that flag the fix as a regression
• Some in-the-wild experiences have a dependency on callouts that remain open on window blur...

PR #15192: Callout: fix issue where it would dismiss on iframe or window focus

• Additively reverts to the original default behavior by making dismissal of callout on window blur an opt-in feature.

On the side, React Northstar has fixed this for their PopUp, ToolTip, and MenuItem components: #18893

My proposal is then to use the hook already used and tested in Northstar, useOnIframeFocus in FluentUi/React callouts

[tronguye]

Hey @micahgodbolt! I see that you triaged this issue. Can you speak to the relative priority of this issue with the other work you and the team is doing? Can I help by opening a PR with the proposed fix of mine?

[tronguye]

@micahgodbolt I just noticed this is also an issue when scrolling within an iframe. I would expect scrolling in an child iframe to dismiss callouts in the parent window. Should I edit this issue or open a new one?

[msft-fluent-ui-bot]

Because this issue has not had activity for over 150 days, we're automatically closing it for house-keeping purposes.

Still require assistance? Please, create a new issue with up-to date details.

[tronguye]

We're still running into this and it affects all iframe hosts. Can we re-open?

[khmakoto]

Reopening

[micahgodbolt]

Moved this to the coastal backlog to improve visibility.

[smhigley]

@tronguye one workaround might be adding onBlur={toggleIsCalloutVisible} to your Callout, which should dismiss it when focus moves to the iframe.

The thing to watch out for there is that if you have an iframe nested inside the Callout, interacting with it will also cause the Callout to dismiss. There isn't really a way to differentiate between focus entering an iframe outside of the callout vs. focus entering an iframe inside the callout.

We also have a shouldDismissOnWindowFocus boolean prop that I believe should create the behavior you want, but doesn't seem to be working in your codepen. I'm leaving this issue open so we can debug why that isn't happening.

Hope that makes sense, and let us know if the onBlur solution addresses your use case

[MemMaoxin]

Hi @micahgodbolt , 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.

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

[microsoft-github-policy-service]

Because this issue has not had activity for over 150 days, we're automatically closing it for house-keeping purposes.

Still require assistance? Please, create a new issue with up-to date details.

[microsoft-github-policy-service]

Because this issue has not had activity for over 150 days, we're automatically closing it for house-keeping purposes.

Still require assistance? Please, create a new issue with up-to date details.

[microsoft-github-policy-service]

Because this issue has not had activity for over 150 days, we're automatically closing it for house-keeping purposes.

Still require assistance? Please, create a new issue with up-to date details.

[microsoft-github-policy-service]

Because this issue has not had activity for over 150 days, we're automatically closing it for house-keeping purposes.

Still require assistance? Please, create a new issue with up-to date details.

[microsoft-github-policy-service]

Because this reported issue has not had any activity for over 180 days, we're automatically closing it for house-keeping reasons.

Still require assistance? Please, create a new issue with up-to date details and latest version of Fluent.

[microsoft-github-policy-service]

Because this issue has not had activity for over 180 days, we're automatically closing it for house-keeping purposes.

Still require assistance? Please, create a new issue with up-to date details.

[microsoft-github-policy-service]

Because this issue has not had activity for over 180 days, we're automatically closing it for house-keeping purposes.

Still require assistance? Please, create a new issue with up-to date details.

[microsoft-github-policy-service]

Because this issue has not had activity for over 180 days, we're automatically closing it for house-keeping purposes.

Still require assistance? Please, create a new issue with up-to date details.

[microsoft-github-policy-service]

Because this issue has not had activity for over 180 days, we're automatically closing it for house-keeping purposes.

Still require assistance? Please, create a new issue with up-to date details.

[microsoft-github-policy-service]

Because this issue has not had activity for over 180 days, we're automatically closing it for house-keeping purposes.

Still require assistance? Please, create a new issue with up-to date details.

[microsoft-github-policy-service]

Because this issue has not had activity for over 180 days, we're automatically closing it for house-keeping purposes.

Still require assistance? Please, create a new issue with up-to date details.

[microsoft-github-policy-service]

Because this issue has not had activity for over 180 days, we're automatically closing it for house-keeping purposes.

Still require assistance? Please, create a new issue with up-to date details.

[microsoft-github-policy-service]

Because this issue has not had activity for over 180 days, we're automatically closing it for house-keeping purposes.

Still require assistance? Please, create a new issue with up-to date details.

[microsoft-github-policy-service]

Because this issue has not had activity for over 180 days, we're automatically closing it for house-keeping purposes.

Still require assistance? Please, create a new issue with up-to date details.

[microsoft-github-policy-service]

Because this issue has not had activity for over 180 days, we're automatically closing it for house-keeping purposes.

Still require assistance? Please, create a new issue with up-to date details.

[microsoft-github-policy-service]

Because this issue has not had activity for over 180 days, we're automatically closing it for house-keeping purposes.

Still require assistance? Please, create a new issue with up-to date details.

[microsoft-github-policy-service]

Because this issue has not had activity for over 180 days, we're automatically closing it for house-keeping purposes.

Still require assistance? Please, create a new issue with up-to date details.

[microsoft-github-policy-service]

Because this reported issue has not had any activity for over 180 days, we're automatically closing it for house-keeping reasons.

Still require assistance? Please, create a new issue with up-to date details and latest version of Fluent.

[microsoft-github-policy-service]

Because this reported issue has not had any activity for over 180 days, we're automatically closing it for house-keeping reasons.

Still require assistance? Please, create a new issue with up-to date details and latest version of Fluent.

[microsoft-github-policy-service]

Because this reported issue has not had any activity for over 180 days, we're automatically closing it for house-keeping reasons.

Still require assistance? Please, create a new issue with up-to date details and latest version of Fluent.