diff --git a/lib/DirectEditing.js b/lib/DirectEditing.js
index ce5e396..404d754 100644
--- a/lib/DirectEditing.js
+++ b/lib/DirectEditing.js
@@ -22,7 +22,8 @@ export default function DirectEditing(eventBus, canvas) {
   this._textbox = new TextBox({
     container: canvas.getContainer(),
     keyHandler: bind(this._handleKey, this),
-    resizeHandler: bind(this._handleResize, this)
+    resizeHandler: bind(this._handleResize, this),
+    blurHandler: bind(this._handleBlur, this)
   });
 }
 
@@ -146,6 +147,9 @@ DirectEditing.prototype._handleKey = function(e) {
   }
 };
 
+DirectEditing.prototype._handleBlur = function(e) {
+  return this.complete();
+};
 
 DirectEditing.prototype._handleResize = function(event) {
   this._fire('resize', event);
diff --git a/lib/TextBox.js b/lib/TextBox.js
index 1364856..4f14438 100644
--- a/lib/TextBox.js
+++ b/lib/TextBox.js
@@ -30,6 +30,8 @@ function toArray(nodeList) {
   return [].slice.call(nodeList);
 }
 
+var noop = function() {};
+
 /**
  * Initializes a container for a content editable div.
  *
@@ -44,6 +46,7 @@ function toArray(nodeList) {
  * @param {DOMElement} options.container The DOM element to append the contentContainer to
  * @param {Function} options.keyHandler Handler for key events
  * @param {Function} options.resizeHandler Handler for resize events
+ * @param {Function} options.blurHandler Handler for blur events
  */
 export default function TextBox(options) {
   this.container = options.container;
@@ -56,8 +59,9 @@ export default function TextBox(options) {
 
   this.content = domQuery('[contenteditable]', this.parent);
 
-  this.keyHandler = options.keyHandler || function() {};
-  this.resizeHandler = options.resizeHandler || function() {};
+  this.keyHandler = options.keyHandler || noop;
+  this.resizeHandler = options.resizeHandler || noop;
+  this.blurHandler = options.blurHandler || noop;
 
   this.autoResize = bind(this.autoResize, this);
   this.handlePaste = bind(this.handlePaste, this);
@@ -82,8 +86,6 @@ export default function TextBox(options) {
  * @return {DOMElement} The created content DOM element
  */
 TextBox.prototype.create = function(bounds, style, value, options) {
-  var self = this;
-
   var parent = this.parent,
       content = this.content,
       container = this.container;
@@ -161,7 +163,7 @@ TextBox.prototype.create = function(bounds, style, value, options) {
 
   domEvent.bind(content, 'keydown', this.keyHandler);
   domEvent.bind(content, 'mousedown', stopPropagation);
-  domEvent.bind(content, 'paste', self.handlePaste);
+  domEvent.bind(content, 'paste', this.handlePaste);
 
   if (options.autoResize) {
     domEvent.bind(content, 'input', this.autoResize);
@@ -173,6 +175,8 @@ TextBox.prototype.create = function(bounds, style, value, options) {
 
   container.appendChild(parent);
 
+  domEvent.bind(parent, 'focusout', this.blurHandler);
+
   // set selection to end of text
   this.setSelection(content.lastChild, content.lastChild && content.lastChild.length);
 
@@ -421,6 +425,8 @@ TextBox.prototype.destroy = function() {
     domRemove(resizeHandle);
   }
 
+  domEvent.unbind(parent, 'focusout', this.blurHandler);
+
   domRemove(parent);
 };