diff --git a/CHANGELOG.md b/CHANGELOG.md index 49544e91..b70e3fdb 100644 --- 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 index e8d917cc..7b887694 100644 --- 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 index 349f347d..a8582aad 100644 --- 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() == []