From 068de910d92b69e3375b6422077e9bcb06dbfe12 Mon Sep 17 00:00:00 2001
From: Tom Najdek <tom@doppnet.com>
Date: Fri, 20 Apr 2018 10:40:54 +0100
Subject: [PATCH] Add an ESC KeyHandler in modal editor #156 #176

Handles cases where focus is lost (e.g. after making a selection in select box)
---
 src/js/components/editor.jsx | 13 ++++++++++++-
 1 file changed, 12 insertions(+), 1 deletion(-)

diff --git a/src/js/components/editor.jsx b/src/js/components/editor.jsx
index 59703ebc..7ee39ad2 100644
--- a/src/js/components/editor.jsx
+++ b/src/js/components/editor.jsx
@@ -4,6 +4,8 @@ const React = require('react');
 const PropTypes = require('prop-types');
 const cx = require('classnames');
 const deepEqual = require('deep-equal');
+const KeyHandler = require('react-key-handler').default;
+const { KEYDOWN } = require('react-key-handler');
 
 const Button = require('zotero-web-library/lib/component/ui/button');
 const ItemBox = require('zotero-web-library/lib/component/item/box');
@@ -168,6 +170,10 @@ class Editor extends React.PureComponent {
 		});
 	}
 
+	handleClose() {
+		this.props.onEditorClose(this.state.hasCreatedItem);
+	}
+
 	get itemTitle() {
 		let item = this.state.item;
 		if(item) {
@@ -210,8 +216,13 @@ class Editor extends React.PureComponent {
 				isOpen={ this.props.isEditorOpen }
 				contentLabel="Item Editor"
 				className={ cx('editor-container modal modal-lg', { loading: this.state.isLoading })}
-				onRequestClose={ () => this.props.onEditorClose(this.state.hasCreatedItem) }
+				onRequestClose={ this.handleClose.bind(this) }
 			>
+				<KeyHandler
+					keyEventName={ KEYDOWN }
+					keyValue="Escape"
+					onKeyHandle={ this.handleClose.bind(this) }
+				/>
 				{ this.state.isLoading ? <Spinner /> : this.renderModalContent() }
 			</Modal>
 		);