Open
Description
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
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
Labels
No labels