Q&A not able to type or edit the text box in embedded report

[ChetanK004]

Hi,

I have embedded a report using react power-bi-client library and have got a Q&A implemented in one of the page in report, these are my configuration:

        return {
            type: 'report',
            id: reportId,
            embedUrl: embedUrl,
            accessToken: accessToken,
            tokenType: models.TokenType.Embed,
            viewMode: models.ViewMode.View,
            permissions: models.Permissions.Read,
            settings: {
                layoutType: models.LayoutType.Custom,
                customLayout: {
                    displayOption: models.DisplayOption.FitToWidth
                },
                filterPaneEnabled: true,
                navContentPaneEnabled: true,
                hideErrors: false,
                panes: { pageNavigation: { visible: true, position: models.PageNavigationPosition.Left } }
            },
            autoEmbedOnContentLoaded: false
        };
    };

The issue am facing is the edit in my iframe doesnot work, it blinks rapidly and doesnot allow to type, am able to apply predefined questions, but not able to edit them too

I have seen this working in playground as well as service and desktop, just that the typing doesnot work in embedded report, not able to understand why?

Note: I am not using a standalone Q&A, so i dont have that config , i am using a regular report with Q&A inbuilt

[V-yubandi-msft]

Hi @ChetanK004 ,

Everything should be clear now. If you need any additional information or further clarification, please feel free to let us know.

Thank you.

[V-yubandi-msft]

Hi @ChetanK004 ,

@johnbasha33 , has pointed out the correct information. Please go through his response and let us know if you need any additional details or clarifications.

Thank you for your valuable input, @johnbasha33 .

Regards,
Yugandhar

[ChetanK004]

Hi @johnbasha33 and @V-yubandi-msft ,

Thanks for the response, i was able to load the Q&A section on the different page, i am still not able to understand what is causing it but i guess it is something to do with react implementation on that page itself, again Thanks for the checklist @johnbasha33 

[V-yubandi-msft]

Hi @ChetanK004 ,

Glad to hear it worked on another page. That does suggest the issue is specific to the React implementation on the original page (likely re rendering or an overlay affecting focus).

Feel free to reach out if you need any further help.

Regards,
Yugandhar

[johnbasha33 · Accepted solution]

Hi @ChetanK004 

1) React re-rendering the embed container (most common)

If your component re-renders and the div that hosts the report is recreated/replaced, the iframe will momentarily lose focus → “blink” → you can’t type.

Fix

• Make sure the embed container div is stable (same element instance).
• Don’t change its key.
• Don’t rebuild the embed config object on every render.

Example patterns that help:

• Put the embed config behind useMemo.
• Only call powerbi.embed() once (on mount) and not on every state change.
• Keep the embed container outside of conditional rendering.

2) A parent element is capturing keystrokes (global keyboard handlers)

Common culprits: app-level shortcuts, search boxes, hotkeys (e.g., keydown listeners), or libraries like react-hotkeys, MUI handlers, etc.

Symptom

• Cursor flashes/blinks in the Q&A box.
• Typing does nothing or gets immediately “canceled”.

Fix

• Temporarily disable global key handlers when the report has focus.
• Or ignore events when event.target is inside the Power BI iframe container.

3) A transparent overlay/div is sitting on top of the iframe intermittently

This can happen with loading spinners, skeletons, tooltips, modals, or “click-catcher” divs.

Check

• In devtools, inspect the page while trying to click/type.
• Look for an element overlaying the iframe (z-index, position absolute).

Fix

• Remove overlay while report is interactive.
• Ensure overlays use pointer-events: none if they must remain visible.

4) Using ViewMode.View + Permissions.Read is fine, but confirm you’re not in a restricted embed scenario

Q&A in a report should still accept input in view mode, but if your embed token / tenant settings restrict certain features, you might see partial behavior.

Check

• Does it happen for all users or only some?
• Does it work if you embed the same report in a plain HTML page (no React state changes)?

If plain HTML works, it’s almost certainly React/focus/overlay.

5) CSS causing focus/scroll/flicker issues

Certain CSS on parents can cause weird iframe behavior:

• transform: translateZ(0) or any transform on ancestor containers
• overflow: hidden with animations
• CSS transitions on the iframe container

Fix

1. Remove transforms/animations on ancestors of the report container.

Keep the report container simple: no transforms, no animated resizing.

Did I answer your question? Mark my post as a solution! Appreciate your Kudos !!