Merge pull request #423 from magicmq/master

Fix `closeOnClickOutside` for the Popover component
snehilvj · Nov 21, 2024 · c06c28a · c06c28a
2 parents 5597d3a + e23b1cc
commit c06c28a
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 3 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,10 @@
 # Change Log
 
+# Unreleased
+
+### Fixed
+- Fixed closing of Popovers when clicking outside. #423 by @magicmq
+
 # 0.15.0
 
 ### Changed

diff --git a/src/ts/components/core/popover/Popover.tsx b/src/ts/components/core/popover/Popover.tsx
@@ -5,7 +5,7 @@ import React from "react";
 
 interface Props extends PopoverProps, DashBaseProps {}
 
-/** Popover Component */
+/** The Popover component can be used to display additional content in a dropdown element, triggered by a user interaction with a target element. */
 const Popover = (props: Props) => {
     const { children, opened, setProps, loading_state, ...others } = props;
 
@@ -15,7 +15,7 @@ const Popover = (props: Props) => {
                 (loading_state && loading_state.is_loading) || undefined
             }
             opened={opened}
-            onClose={() => setProps({ opened: false })}
+            onChange={(_opened) => !_opened && setProps({ opened: false })}
             {...others}
         >
             {React.Children.map(children, (child: any, index) => {

diff --git a/tests/test_popover.py b/tests/test_popover.py
@@ -10,6 +10,7 @@ def test_001po_popover(dash_duo):
     app.layout = dmc.MantineProvider(
         html.Div(
             [
+                html.Div("Click Outside", id="click-outside", style={"background": "grey"}),
                 dmc.Popover(
                     [
                         dmc.PopoverTarget(dmc.Button("Toggle Popover", id="btn")),
@@ -32,13 +33,30 @@ def update_output(opened):
     # Wait for the app to load
     dash_duo.wait_for_text_to_equal("#output", "False")
 
+    # Open Popover
     popover_btn = dash_duo.find_element("#btn")
     popover_btn.click()
 
-    # Verify the output
+    # Verify the Popover opens when clicking the target
     dash_duo.wait_for_text_to_equal("#output", "True")
 
+    # Close Popover
     popover_btn.click()
+
+    # Verify the Popover closes when clicking the target
+    dash_duo.wait_for_text_to_equal("#output", "False")
+
+    #Open Popover
+    popover_btn.click()
+
+    # Verify the Popover is open
+    dash_duo.wait_for_text_to_equal("#output", "True")
+
+    # Click outside
+    click_outside = dash_duo.find_element("#click-outside")
+    click_outside.click()
+
+    # Verify the Popover closes when clicking outside
     dash_duo.wait_for_text_to_equal("#output", "False")
 
     assert dash_duo.get_logs() == []