diff --git a/CHANGELOG.md b/CHANGELOG.md index a446cf7..79e48b1 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -11,10 +11,13 @@ Note: `Chip` was available before but not documented. If you used `Chip` in dmc< - Added new and missing props to the charts #349 by @AnnMarieW + ### Fixed - Excluded the `loading_state` prop from being passed to the DOM. Added `data-dash-is-loading` attribute to components during callback execution, allowing custom CSS styling for loading states. #325 by @AnnMarieW +- Enabled the `opened` prop to trigger callback #353 by @AnnMarieW + ### Changed diff --git a/src/ts/components/core/popover/Popover.tsx b/src/ts/components/core/popover/Popover.tsx index 86df721..e8d917c 100644 --- a/src/ts/components/core/popover/Popover.tsx +++ b/src/ts/components/core/popover/Popover.tsx @@ -5,25 +5,34 @@ import React from "react"; interface Props extends PopoverProps, DashBaseProps {} -/** Popover */ +/** Popover Component */ const Popover = (props: Props) => { - const { children, setProps, loading_state, ...others } = props; + const { children, opened, setProps, loading_state, ...others } = props; return ( setProps({ opened: false })} {...others} > {React.Children.map(children, (child: any, index) => { const childType = child.props._dashprivate_layout.type; + if (childType === "PopoverTarget") { const { boxWrapperProps } = child.props; const boxProps = { w: "fit-content", ...boxWrapperProps }; + return ( - {child} + setProps({ opened: !opened })} + {...boxProps} + > + {child} + ); } @@ -33,6 +42,8 @@ const Popover = (props: Props) => { ); }; -Popover.defaultProps = {}; +Popover.defaultProps = { + opened: false, +}; export default Popover; diff --git a/tests/test_popover.py b/tests/test_popover.py new file mode 100644 index 0000000..d06066d --- /dev/null +++ b/tests/test_popover.py @@ -0,0 +1,42 @@ +from dash import Dash, html, Output, Input, _dash_renderer +import dash_mantine_components as dmc + +_dash_renderer._set_react_version("18.2.0") + +def test_001po_popover(dash_duo): + app = Dash(__name__) + + app.layout = dmc.MantineProvider( + html.Div([ + dmc.Popover( + [dmc.PopoverTarget(dmc.Button("Toggle Popover", id="btn")), + dmc.PopoverDropdown(dmc.Text("This popover is opened"))], + id='popover', + opened=False + ), + html.Div(id='output') + ]) + ) + + @app.callback( + Output('output', 'children'), + Input('popover', 'opened') + ) + def update_output(opened): + return str(opened) + + dash_duo.start_server(app) + + # Wait for the app to load + dash_duo.wait_for_text_to_equal("#output", "False") + + popover_btn = dash_duo.find_element("#btn") + popover_btn.click() + + # Verify the output + dash_duo.wait_for_text_to_equal("#output", "True") + + popover_btn.click() + dash_duo.wait_for_text_to_equal("#output", "False") + + assert dash_duo.get_logs() == []