Escape key not closing add funds dialog

js/about/preferences.js

@@ -468,12 +468,23 @@ class BitcoinDashboard extends ImmutableComponent {
     return <div className='bitcoinDashboard'>
       {
       this.props.bitcoinOverlayVisible
-        ? <ModalOverlay title={'bitcoinBuy'} content={this.bitcoinOverlayContent} customTitleClasses={'coinbaseOverlay'} emptyDialog={emptyDialog} onHide={this.props.hideOverlay.bind(this)} />
+        ? <ModalOverlay
+          title={'bitcoinBuy'}
+          content={this.bitcoinOverlayContent}
+          customTitleClasses={'coinbaseOverlay'}
+          emptyDialog={emptyDialog}
+          onEscape={this.props.hideOverlay.bind(this)}
+          onHide={this.props.hideOverlay.bind(this)} />
         : null
       }
       {
         this.props.qrcodeOverlayVisible
-        ? <ModalOverlay content={this.qrcodeOverlayContent} customTitleClasses={'qrcodeOverlay'} footer={this.qrcodeOverlayFooter} onHide={this.props.hideQRcode.bind(this)} />
+        ? <ModalOverlay
+          content={this.qrcodeOverlayContent}
+          customTitleClasses={'qrcodeOverlay'}
+          footer={this.qrcodeOverlayFooter}
+          onEscape={this.props.hideQRcode.bind(this)}
+          onHide={this.props.hideQRcode.bind(this)} />
         : null
       }
       <div className='board addFundsBoard'>
@@ -1339,27 +1350,47 @@ class PaymentsTab extends ImmutableComponent {
     return <div className='paymentsContainer'>
       {
       this.enabled && this.props.addFundsOverlayVisible
-        ? <ModalOverlay title={this.overlayTitle} content={this.overlayContent} onHide={this.props.hideOverlay.bind(this, 'addFunds')} />
+        ? <ModalOverlay title={this.overlayTitle}
+          content={this.overlayContent}
+          onEscape={this.props.hideOverlay.bind(this, 'addFunds')}
+          onHide={this.props.hideOverlay.bind(this, 'addFunds')} />
         : null
       }
       {
         this.enabled && this.props.paymentHistoryOverlayVisible
-        ? <ModalOverlay title={'paymentHistoryTitle'} customTitleClasses={'paymentHistory'} content={this.paymentHistoryContent} footer={this.paymentHistoryFooter} onHide={this.props.hideOverlay.bind(this, 'paymentHistory')} />
+        ? <ModalOverlay title={'paymentHistoryTitle'}
+          customTitleClasses={'paymentHistory'}
+          content={this.paymentHistoryContent}
+          footer={this.paymentHistoryFooter}
+          onEscape={this.props.hideOverlay.bind(this, 'paymentHistory')}
+          onHide={this.props.hideOverlay.bind(this, 'paymentHistory')} />
         : null
       }
       {
         this.enabled && this.props.advancedSettingsOverlayVisible
-        ? <ModalOverlay title={'advancedSettingsTitle'} content={this.advancedSettingsContent} footer={this.advancedSettingsFooter} onHide={this.props.hideOverlay.bind(this, 'advancedSettings')} />
+        ? <ModalOverlay title={'advancedSettingsTitle'}
+          content={this.advancedSettingsContent}
+          footer={this.advancedSettingsFooter}
+          onEscape={this.props.hideOverlay.bind(this, 'advancedSettings')}
+          onHide={this.props.hideOverlay.bind(this, 'advancedSettings')} />
         : null
       }
       {
         this.enabled && this.props.ledgerBackupOverlayVisible
-        ? <ModalOverlay title={'ledgerBackupTitle'} content={this.ledgerBackupContent} footer={this.ledgerBackupFooter} onHide={this.props.hideOverlay.bind(this, 'ledgerBackup')} />
+        ? <ModalOverlay title={'ledgerBackupTitle'}
+          content={this.ledgerBackupContent}
+          footer={this.ledgerBackupFooter}
+          onEscape={this.props.hideOverlay.bind(this, 'ledgerBackup')}
+          onHide={this.props.hideOverlay.bind(this, 'ledgerBackup')} />
         : null
       }
       {
         this.enabled && this.props.ledgerRecoveryOverlayVisible
-        ? <ModalOverlay title={'ledgerRecoveryTitle'} content={this.ledgerRecoveryContent} footer={this.ledgerRecoveryFooter} onHide={this.props.hideOverlay.bind(this, 'ledgerRecovery')} />
+        ? <ModalOverlay title={'ledgerRecoveryTitle'}
+          content={this.ledgerRecoveryContent}
+          footer={this.ledgerRecoveryFooter}
+          onEscape={this.props.hideOverlay.bind(this, 'ledgerRecovery')}
+          onHide={this.props.hideOverlay.bind(this, 'ledgerRecovery')} />
         : null
       }
       <div className='advancedSettingsWrapper'>
@@ -1966,11 +1997,7 @@ class AboutPreferences extends React.Component {
   setOverlayVisible (isVisible, overlayName) {
     let stateDiff = {}
     stateDiff[`${overlayName}OverlayVisible`] = isVisible
-    if (overlayName === 'addFunds' && isVisible === false) {
-      // Hide the child overlays when the parent is closed
-      stateDiff['bitcoinOverlayVisible'] = false
-      stateDiff['qrcodeOverlayVisible'] = false
-    }
+
     this.setState(stateDiff)
     // Tell ledger when Add Funds overlay is closed
     if (isVisible === false && overlayName === 'addFunds') {

js/components/modalOverlay.js

@@ -4,6 +4,7 @@
 
 const React = require('react')
 const ImmutableComponent = require('./immutableComponent')
+const KeyCodes = require('../../app/common/constants/keyCodes')
 
 /**
  * Represents a modal overlay
@@ -13,6 +14,13 @@ var globalInstanceCounter = 0
 var mountedInstances = []
 
 class ModalOverlay extends ImmutableComponent {
+  constructor () {
+    super()
+    this.state = {
+      previousElement: null
+    }
+    this.onKeyDown = this.onKeyDown.bind(this)
+  }
 
   componentWillMount () {
     this.instanceId = globalInstanceCounter++
@@ -28,9 +36,18 @@ class ModalOverlay extends ImmutableComponent {
     mountedInstances.push(this)
   }
 
+  componentDidMount () {
+    this.setState({previousElement: document.activeElement})
+    this.closeButton.focus()
+  }
+
   componentWillUnmount () {
     let instId = this.instanceId
 
+    if (this.state.previousElement) {
+      this.state.previousElement.focus()
+    }
+
     mountedInstances = mountedInstances.filter(function (inst) {
       return inst.instanceId !== instId
     })
@@ -42,12 +59,22 @@ class ModalOverlay extends ImmutableComponent {
     }
   }
 
+  onKeyDown (e) {
+    switch (e.keyCode) {
+      case KeyCodes.ESC:
+        // Stop propagation to make sure only the top modal closes
+        e.stopPropagation()
+        this.props.onEscape()
+        break
+    }
+  }
+
   get dialogContent () {
     var close = null
     var button = null
     var title = null
     if (!this.props.emptyDialog) {
-      close = (this.props.onHide ? <button type='button' className='close' onClick={this.props.onHide} /> : null)
+      close = (this.props.onHide ? <button ref={(node) => { this.closeButton = node }} type='button' className='close' onClick={this.props.onHide} /> : null)
       title = (this.props.title ? <div className='sectionTitle' data-l10n-id={this.props.title} /> : null)
     }
     let customTitleClassesStr = (this.props.customTitleClasses ? this.props.customTitleClasses : '')
@@ -67,7 +94,7 @@ class ModalOverlay extends ImmutableComponent {
   }
 
   render () {
-    return <div className={'modal fade' + (this.state.last ? ' last' : '') + (this.props.transparentBackground ? ' transparentBackground' : '')} role='alert'>
+    return <div onKeyDown={this.onKeyDown} className={'modal fade' + (this.state.last ? ' last' : '') + (this.props.transparentBackground ? ' transparentBackground' : '')} role='alert'>
       {this.dialogContent}
     </div>
   }