[Feature]: Sharepoint/Web-Parts: Close Panel/Dialog on navigate to other page

[drweb86]

Library

React / v8 (@fluentui/react)

Describe the feature that you would like added

Hello

We use fluent-ui in web-part of Sharepoint. Panel contains link navigating to other Sharepoint page.

When to simplify code it looks like this (unfortunately I cannot provide full reproduction sample, because it involves web-part creation).

Sharepoint web-part is located in one page and opens panel (or Dialog in our case) with information

import * as React from 'react';
import * as ReactDom from 'react-dom';
import { Link, Panel } from 'office-ui-fabric-react';

(() => {
    const container = document.getElementsByClassName('className')[0];
    ReactDom.render(<Panel isOpen>
        <Link href="https://tenant.sharepoint.com/sites/site/SitePages/unpublishedCourse.aspx">TEST</Link>
    </Panel>,
    container);
})();

When user clicks link - unpublishedCourse.aspx is opened, but panel stays on top of this page making users wondering why. My understanding that Sharepoint is using routing for navigation between pages, thats why page is not reloaded entirely.

In reality we have issue with some Dialog. I changed code to Panel to make it simple.

Currently without automatically closing panels, we cannot use URLs to sharepoint pages in Dialogs/panels if they point to other page on same sharepoint site or will have to change them to JS code.

Feature request is to make Dialog/Panel work better with Sharepoint web-parts. When browser URL is changed, consider automatically close Dialog/panels.

Thanks.

Have you discussed this feature with our team

No

Additional context

No response

Validations

• [X] Check that there isn't already an issue that request the same feature to avoid creating a duplicate.

[drweb86]

Currently we have to do something like this to handle Sharepoint.

    private static unmountOnSharepointRouteChange(root: Element) {
        const originalHref = location.href;
        const unmountOnUrlChangeObserver = new MutationObserver(callback);
        function callback() {
            if (originalHref != location.href) {
                ReactDom.unmountComponentAtNode(root);
                unmountOnUrlChangeObserver.disconnect();
            }
        }
        unmountOnUrlChangeObserver.observe(document.body, { childList: true, subtree: true });
    }

[micahgodbolt]

This repo is not associated with webparts. Is there a specific feature request you are asking for in the Panel/Dialog components or a bug that you can reproduce outside of sharepoint?

[drweb86]

Hello @micahgodbolt . I propose to close Dialogs/Panels/Menus automatically on route change, even if this route change is made by host application (like in Sharepoint).

However I'm not sure if this is good feature request, since its only Sharepoint staff where this issue is happening, that during Url navigation to other sharepoint page panels/... stays visible and the workaround is posted above.

[msft-fluent-ui-bot]

Gentle ping that this issue needs attention.

[microsoft-github-policy-service[bot]]

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.