Tables in Report are Blank after Embed.reload() in Chromium Browsers

[benjamin-musil]

Got a funny bug that is only happening in Chromium browsers (e.g. Edge, Brave, Chrome) and not Firefox. If you do Embed.reload(), tables that are on the report page will not display, though the table component itself is there. If you adjust the width of the iframe, then the report page will refresh (images of before and after below).

After an Embed.reload():

After adjusting iframe content width:

Workaround The workaround is to listen to the rendered event from the PowerBIEmbed component and either

1. Report.setPage() to "refresh" the page
2. Adjust width briefly then set it back to auto or 100%

Another wrench is that we want to display the same page the user was on after an Embed.reload() occurs and we're trying to hide the transition of reload going to the first page of the report, then returning to the page the user was on. With the table blank bug, we have to set a manual timeout to make sure the page is in view before making a toggle to the width.

const renderedEventHandler: EventHandler = () => {
        const setActivePageOnReload = async () => {
            void setIsReportReloadDone(false);

            await embeddedReportComponent?.setPage(activePage?.name || '');
            void setReportReloadClicked(false);

            // The temp css class needs to be removed *after* the page is rendered, useEffect too quick
            setTimeout(() => {
                 void  setIsReportReloadDone(true);
            }, 300);
        };

        if (reportReloadClicked) {
            void setActivePageOnReload();
        }
    };

and for the cssClassName in PowerBIEmbed:

cssClassName={`${!isReportReloadDone ? styles.temp_width_change : ''}`}

[KotanaSai21]

We are not able to reproduce this issue. Please Contact PowerBI support