Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[POPOVER] Legacy trigger error inside an iframe #1040

Open
Vanessa1507 opened this issue May 15, 2024 · 0 comments
Open

[POPOVER] Legacy trigger error inside an iframe #1040

Vanessa1507 opened this issue May 15, 2024 · 0 comments

Comments

@Vanessa1507
Copy link

Vanessa1507 commented May 15, 2024

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)
@Vanessa1507 Vanessa1507 changed the title [POPOVER] Legacy trigger error in an iframe [POPOVER] Legacy trigger error inside an iframe May 15, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Development

No branches or pull requests

1 participant