fix(Popup): Focus the last focused element outside Popup on ESC (#861)

* fix(Popup): Focus the last focused element outside Popup on ESC

* Update changelog

* Update packages/react/src/components/Popup/Popup.tsx

Co-Authored-By: sophieH29 <[email protected]>

Author: sophieH29

CHANGELOG.md

@@ -26,6 +26,9 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 - Add `black` and `white` options for the `color` prop of the `Label` component @mnajdova ([#855](https://github.com/stardust-ui/react/pull/855))
 - Add `Flex` component @kuzhelov ([#802](https://github.com/stardust-ui/react/pull/802))
 
+### Fixes
+- Focus the last focused element which triggered `Popup` on ESC @sophieH29 ([#861](https://github.com/stardust-ui/react/pull/861))
+
 <!--------------------------------[ v0.20.0 ]------------------------------- -->
 ## [v0.20.0](https://github.com/stardust-ui/react/tree/v0.20.0) (2019-02-06)
 [Compare changes](https://github.com/stardust-ui/react/compare/v0.19.2...v0.20.0)

packages/react/src/components/Popup/Popup.tsx

@@ -166,13 +166,15 @@ export default class Popup extends AutoControlledComponent<ReactProps<PopupProps
   private outsideClickSubscription = EventStack.noSubscription
 
   private triggerDomElement = null
+  // focusable element which has triggered Popup, can be either triggerDomElement or the element inside it
+  private triggerFocusableDomElement = null
   private popupDomElement = null
 
   private closeTimeoutId
 
   protected actionHandlers: AccessibilityActionHandlers = {
     closeAndFocusTrigger: e => {
-      this.close(e, () => _.invoke(this.triggerDomElement, 'focus'))
+      this.close(e, () => _.invoke(this.triggerFocusableDomElement, 'focus'))
       e.stopPropagation()
     },
     close: e => this.close(e),
@@ -474,6 +476,10 @@ export default class Popup extends AutoControlledComponent<ReactProps<PopupProps
   }
 
   private trySetOpen(newValue: boolean, eventArgs: any) {
+    // when new state 'open' === 'true', save the last focused element
+    if (newValue) {
+      this.updateTriggerFocusableDomElement()
+    }
     this.trySetState({ open: newValue })
     _.invoke(this.props, 'onOpenChange', eventArgs, { ...this.props, ...{ open: newValue } })
   }
@@ -497,4 +503,14 @@ export default class Popup extends AutoControlledComponent<ReactProps<PopupProps
       onClose && onClose()
     }
   }
+
+  /**
+   * Save DOM element which had focus before Popup opens.
+   * Can be either trigger DOM element itself or the element inside it.
+   */
+  private updateTriggerFocusableDomElement() {
+    this.triggerFocusableDomElement = this.triggerDomElement.contains(document.activeElement)
+      ? document.activeElement
+      : this.triggerDomElement
+  }
 }