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

sophieH29 · web-flow · commit fc0d5581a965 · 2019-02-08T11:28:19.000+01:00
* 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 &lt;8460706+sophieH29@users.noreply.github.com&gt;
diff --git a/CHANGELOG.md b/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)
diff --git a/packages/react/src/components/Popup/Popup.tsx b/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
+  }
 }
