From af980789178a234e7de1643a2f9649fc70e2665f Mon Sep 17 00:00:00 2001
From: AnnMarueW <amward@fastmail.com>
Date: Sun, 13 Oct 2024 08:56:47 -0700
Subject: [PATCH 1/5] controlled popover

---
 src/ts/components/core/popover/Popover.tsx | 19 +++++++++++++++----
 1 file changed, 15 insertions(+), 4 deletions(-)

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 (
         <MantinePopover
             data-dash-is-loading={
                 (loading_state && loading_state.is_loading) || undefined
             }
+            opened={opened}
+            onClose={() => 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 (
                         <MantinePopover.Target key={index}>
-                            <Box {...boxProps}>{child}</Box>
+                            <Box
+                                onClick={() => setProps({ opened: !opened })}
+                                {...boxProps}
+                            >
+                                {child}
+                            </Box>
                         </MantinePopover.Target>
                     );
                 }
@@ -33,6 +42,8 @@ const Popover = (props: Props) => {
     );
 };
 
-Popover.defaultProps = {};
+Popover.defaultProps = {
+    opened: false,
+};
 
 export default Popover;

From b59110a68d10e2bde94ba8cd67f0a44a52cc4bc1 Mon Sep 17 00:00:00 2001
From: AnnMarueW <amward@fastmail.com>
Date: Sun, 13 Oct 2024 09:37:59 -0700
Subject: [PATCH 2/5] added test

---
 tests/test_popover.py | 42 ++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 42 insertions(+)
 create mode 100644 tests/test_popover.py

diff --git a/tests/test_popover.py b/tests/test_popover.py
new file mode 100644
index 0000000..ba80eb4
--- /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 opened
+
+    dash_duo.start_server(app)
+
+    # Wait for the app to load
+    dash_duo.wait_for_element("#popover")
+
+    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() == []

From 82e62dec23c7dad0d2408cc3fe4482b944871a38 Mon Sep 17 00:00:00 2001
From: AnnMarueW <amward@fastmail.com>
Date: Sun, 13 Oct 2024 09:56:23 -0700
Subject: [PATCH 3/5] fixed test

---
 tests/test_popover.py | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/tests/test_popover.py b/tests/test_popover.py
index ba80eb4..839170a 100644
--- a/tests/test_popover.py
+++ b/tests/test_popover.py
@@ -28,7 +28,7 @@ def update_output(opened):
     dash_duo.start_server(app)
 
     # Wait for the app to load
-    dash_duo.wait_for_element("#popover")
+    dash_duo.wait_for_text_to_equal("#output", "False")
 
     popover_btn = dash_duo.find_element("#btn")
     popover_btn.click()

From 58499bc1625a0e2ee0f5c961b04c859cdc58bdd2 Mon Sep 17 00:00:00 2001
From: AnnMarueW <amward@fastmail.com>
Date: Sun, 13 Oct 2024 10:06:05 -0700
Subject: [PATCH 4/5] fixed test

---
 tests/test_popover.py | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/tests/test_popover.py b/tests/test_popover.py
index 839170a..d06066d 100644
--- a/tests/test_popover.py
+++ b/tests/test_popover.py
@@ -23,7 +23,7 @@ def test_001po_popover(dash_duo):
         Input('popover', 'opened')
     )
     def update_output(opened):
-        return opened
+        return str(opened)
 
     dash_duo.start_server(app)
 

From cd9542e4319c0cf0da8878ca472a32a3c6dda3e9 Mon Sep 17 00:00:00 2001
From: AnnMarueW <amward@fastmail.com>
Date: Sun, 13 Oct 2024 16:05:06 -0700
Subject: [PATCH 5/5] updated changelog

---
 CHANGELOG.md | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 22dc157..7f50ed1 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -10,10 +10,13 @@ Note: `Chip` was available before but not documented. If you used `Chip` in dmc<
 - Added GitHub actions workflow for automated tests on PRs by @BSd3v
 
 
+
 ### 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