diff --git a/package.json b/package.json
index 46517230a7..ee089daf29 100644
--- a/package.json
+++ b/package.json
@@ -65,6 +65,7 @@
     "file-saver": "^1.3.3",
     "filesize": "3.5.6",
     "flux": "2.1.1",
+    "focus-trap-react": "^3.0.5",
     "fuse.js": "^2.2.0",
     "glob": "^5.0.14",
     "highlight.js": "^8.9.1",
@@ -78,7 +79,6 @@
     "react": "^15.4.0",
     "react-addons-css-transition-group": "15.3.2",
     "react-dom": "^15.4.0",
-    "react-focus-trap": "^2.5.0",
     "react-gemini-scrollbar": "matrix-org/react-gemini-scrollbar#5e97aef",
     "sanitize-html": "^1.14.1",
     "text-encoding-utf-8": "^1.0.1",
diff --git a/src/Modal.js b/src/Modal.js
index daf66a37de..68d75d1ff1 100644
--- a/src/Modal.js
+++ b/src/Modal.js
@@ -19,7 +19,6 @@ limitations under the License.
 
 const React = require('react');
 const ReactDOM = require('react-dom');
-import FocusTrap from 'react-focus-trap';
 import Analytics from './Analytics';
 import sdk from './index';
 
@@ -165,7 +164,6 @@ class ModalManager {
         );
         modal.onFinished = props ? props.onFinished : null;
         modal.className = className;
-        modal.closeDialog = closeDialog;
 
         this._modals.unshift(modal);
 
@@ -196,9 +194,9 @@ class ModalManager {
         const modal = this._modals[0];
         const dialog = (
             <div className={"mx_Dialog_wrapper " + (modal.className ? modal.className : '')}>
-                <FocusTrap className="mx_Dialog" onExit={modal.closeDialog}>
+                <div className="mx_Dialog">
                     { modal.elem }
-                </FocusTrap>
+                </div>
                 <div className="mx_Dialog_background" onClick={this.closeAll}></div>
             </div>
         );
diff --git a/src/components/views/dialogs/BaseDialog.js b/src/components/views/dialogs/BaseDialog.js
index 1f29f2d1f4..25909a18fa 100644
--- a/src/components/views/dialogs/BaseDialog.js
+++ b/src/components/views/dialogs/BaseDialog.js
@@ -15,6 +15,7 @@ limitations under the License.
 */
 
 import React from 'react';
+import FocusTrap from 'focus-trap-react';
 
 import * as KeyCode from '../../../KeyCode';
 import AccessibleButton from '../elements/AccessibleButton';
@@ -61,6 +62,14 @@ export default React.createClass({
         }
     },
 
+    _onKeyDown: function(e) {
+        if (e.keyCode === KeyCode.ESCAPE) {
+            e.stopPropagation();
+            e.preventDefault();
+            this.props.onFinished();
+        }
+    },
+
     _onCancelClick: function(e) {
         this.props.onFinished();
     },
@@ -69,7 +78,7 @@ export default React.createClass({
         const TintableSvg = sdk.getComponent("elements.TintableSvg");
 
         return (
-            <div className={this.props.className} role="dialog" aria-labelledby='mx_BaseDialog_title' aria-describedby={this.props.contentId}>
+            <FocusTrap onKeyDown={this._onKeyDown} className={this.props.className} role="dialog" aria-labelledby='mx_BaseDialog_title' aria-describedby={this.props.contentId}>
                 <AccessibleButton onClick={this._onCancelClick}
                     className="mx_Dialog_cancelButton"
                 >
@@ -79,7 +88,7 @@ export default React.createClass({
                     { this.props.title }
                 </div>
                 { this.props.children }
-            </div>
+            </FocusTrap>
         );
     },
 });