Skip to content

[POPOVER] Legacy trigger error inside an iframe #1040

Open
@Vanessa1507

Description

@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/[email protected]_17_0m1715794171.14.0.js:19866:28)

    at commitPassiveHookEffects (https://7dqzdj-8081.csb.app/_dash-component-suites/dash/deps/[email protected]_17_0m1715794171.14.0.js:19904:13)

    at HTMLUnknownElement.callCallback (https://7dqzdj-8081.csb.app/_dash-component-suites/dash/deps/[email protected]_17_0m1715794171.14.0.js:182:16)

    at Object.invokeGuardedCallbackDev (https://7dqzdj-8081.csb.app/_dash-component-suites/dash/deps/[email protected]_17_0m1715794171.14.0.js:231:18)

    at invokeGuardedCallback (https://7dqzdj-8081.csb.app/_dash-component-suites/dash/deps/[email protected]_17_0m1715794171.14.0.js:286:33)

    at flushPassiveEffectsImpl (https://7dqzdj-8081.csb.app/_dash-component-suites/dash/deps/[email protected]_17_0m1715794171.14.0.js:22988:11)

    at unstable_runWithPriority (https://7dqzdj-8081.csb.app/_dash-component-suites/dash/deps/[email protected]_17_0m1715794171.14.0.js:2685:14)

    at runWithPriority$1 (https://7dqzdj-8081.csb.app/_dash-component-suites/dash/deps/[email protected]_17_0m1715794171.14.0.js:11174:12)

    at flushPassiveEffects (https://7dqzdj-8081.csb.app/_dash-component-suites/dash/deps/[email protected]_17_0m1715794171.14.0.js:22955:14)

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions