diff --git a/CHANGELOG.md b/CHANGELOG.md index b7d67b7020..dca47c95c3 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -35,7 +35,8 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm - Fix `Popup` logic of handling `content` value provided as React element @kuzhelov ([#592](https://github.com/stardust-ui/react/pull/592)) - Do not handle `FocusZone`'s keyDownCapture in `chatBehavior` @sophieH29 ([#563](https://github.com/stardust-ui/react/pull/563)) - Fix `getKeyDownHandler` to pass props for client's onKeyDown handler @sophieH29 ([#595](https://github.com/stardust-ui/react/pull/595)) -- fix multiple React's warnings about keys in docs @layershifter ([#602](https://github.com/stardust-ui/react/pull/602)) +- Fix `Popup` not closing on outside click @kuzhelov ([#598](https://github.com/stardust-ui/react/pull/598)) +- Fix multiple React's warnings about keys in docs @layershifter ([#602](https://github.com/stardust-ui/react/pull/602)) ### Features - `Ref` components uses `forwardRef` API by default @layershifter ([#491](https://github.com/stardust-ui/react/pull/491)) diff --git a/src/components/Popup/Popup.tsx b/src/components/Popup/Popup.tsx index 45be64cadc..1a421c12d7 100644 --- a/src/components/Popup/Popup.tsx +++ b/src/components/Popup/Popup.tsx @@ -154,11 +154,22 @@ export default class Popup extends AutoControlledComponent { - this.outsideClickSubscription = EventStack.subscribe('click', e => { - if (!this.popupDomElement || !this.popupDomElement.contains(e.target)) { - this.state.open && this.trySetOpen(false, e, true) - } - }) + this.outsideClickSubscription = EventStack.subscribe( + 'click', + e => { + const isOutsidePopupElement = + this.popupDomElement && !this.popupDomElement.contains(e.target) + const isOutsideTriggerElement = + this.triggerDomElement && !this.triggerDomElement.contains(e.target) + + if (isOutsidePopupElement && isOutsideTriggerElement) { + this.state.open && this.trySetOpen(false, e, true) + } + }, + { + useCapture: true, + }, + ) }) } }