[POPOVER] Legacy trigger error inside an iframe

[Vanessa1507]

Please fill out the below information as much as possible.

• dash version: 2.14.1
• dash-bootstrap-components version: 1.4.2
• components affected by bug:
  • Popover
  • Tooltip

What is happening?

We are using the Popover and Tooltip components in our Dash App and those are loaded inside an iframe. We tried to use the Popover and Tooltip components with the legacy trigger, but when we clicked on the target element to show them an error arose. This happens only when the dash app is loaded in an iframe, otherwise, it works.

What should be happening?

The Popover and Tooltip components with legacy trigger must work inside the iframe.

Code

CodeSandbox

from dash import Dash, html, dcc, callback, Output, Input
import dash_bootstrap_components as dbc

app = Dash(external_stylesheets=[dbc.themes.BOOTSTRAP])


app.layout = [
    html.H1(children='Title of Dash App', style={'textAlign': 'center'}),
    html.Div(
        [
            dbc.Button(
                "Popover target",
                id="legacy-target",
                color="danger",
                n_clicks=0
            ),
            dbc.Popover(
                "I am a popover!",
                target="legacy-target",
                body=True,
                trigger="legacy",
            ),
            dbc.Button(
                "Tooltip target",
                id="tooltip-target",
            ),
            dbc.Tooltip(
                "Tooltip on",
                target="tooltip-target",
                trigger="legacy"
            )
        ]
    )
]

if __name__ == '__main__':
    app.run_server(debug=True, host="localhost", port=8081, use_reloader=True)

Error messages

Permission denied to access property "event" on cross-origin object

(This error originated from the built-in JavaScript code that runs Dash apps. Click to see the full stack trace or open your browser's console.)
Error: Failed to read a named property 'event' from 'Window': Blocked a frame with origin "https://7dqzdj-8081.csb.app" from accessing a cross-origin frame.

    at https://7dqzdj-8081.csb.app/_dash-component-suites/dash_bootstrap_components/_components/dash_bootstrap_components.v1_6_0m1715794182.min.js:2:104731

    at commitHookEffectListMount (https://7dqzdj-8081.csb.app/_dash-component-suites/dash/deps/react-dom@16.v2_17_0m1715794171.14.0.js:19866:28)

    at commitPassiveHookEffects (https://7dqzdj-8081.csb.app/_dash-component-suites/dash/deps/react-dom@16.v2_17_0m1715794171.14.0.js:19904:13)

    at HTMLUnknownElement.callCallback (https://7dqzdj-8081.csb.app/_dash-component-suites/dash/deps/react-dom@16.v2_17_0m1715794171.14.0.js:182:16)

    at Object.invokeGuardedCallbackDev (https://7dqzdj-8081.csb.app/_dash-component-suites/dash/deps/react-dom@16.v2_17_0m1715794171.14.0.js:231:18)

    at invokeGuardedCallback (https://7dqzdj-8081.csb.app/_dash-component-suites/dash/deps/react-dom@16.v2_17_0m1715794171.14.0.js:286:33)

    at flushPassiveEffectsImpl (https://7dqzdj-8081.csb.app/_dash-component-suites/dash/deps/react-dom@16.v2_17_0m1715794171.14.0.js:22988:11)

    at unstable_runWithPriority (https://7dqzdj-8081.csb.app/_dash-component-suites/dash/deps/react@16.v2_17_0m1715794171.14.0.js:2685:14)

    at runWithPriority$1 (https://7dqzdj-8081.csb.app/_dash-component-suites/dash/deps/react-dom@16.v2_17_0m1715794171.14.0.js:11174:12)

    at flushPassiveEffects (https://7dqzdj-8081.csb.app/_dash-component-suites/dash/deps/react-dom@16.v2_17_0m1715794171.14.0.js:22955:14)