diff --git a/internal_packages/message-list/lib/email-frame.cjsx b/internal_packages/message-list/lib/email-frame.cjsx
index 51f251f22..189334066 100644
--- a/internal_packages/message-list/lib/email-frame.cjsx
+++ b/internal_packages/message-list/lib/email-frame.cjsx
@@ -111,7 +111,7 @@ class EmailFrame extends React.Component
@displayName = 'EmailFrame'
render: =>
-
+
componentDidMount: =>
@_mounted = true
@@ -140,6 +140,10 @@ class EmailFrame extends React.Component
doc.write("
#{@_emailContent()}
")
doc.close()
+ # Notify the EventedIFrame that we've replaced it's document (with `open`)
+ # so it can attach event listeners again.
+ @refs.iframe.documentWasReplaced()
+
_setFrameHeight: =>
_.defer =>
return unless @_mounted
diff --git a/src/components/evented-iframe.cjsx b/src/components/evented-iframe.cjsx
index c2ace28ec..f9d14f223 100644
--- a/src/components/evented-iframe.cjsx
+++ b/src/components/evented-iframe.cjsx
@@ -28,18 +28,33 @@ class EventedIFrame extends React.Component
@_subscribeToIFrameEvents()
componentWillUnmount: =>
+ @_unsubscribeFromIFrameEvents()
+
+ ###
+ Public: Call this method if you replace the contents of the iframe's document.
+ This allows {EventedIframe} to re-attach it's event listeners.
+ ###
+ documentWasReplaced: =>
+ @_unsubscribeFromIFrameEvents()
+ @_subscribeToIFrameEvents()
+
+ _unsubscribeFromIFrameEvents: =>
doc = React.findDOMNode(@).contentDocument
- for e in ['click', 'keydown', 'mousedown', 'mousemove', 'mouseup']
- doc?.removeEventListener?(e)
+ return unless doc
+ doc.removeEventListener('click', @_onIFrameClick)
+ doc.removeEventListener('keydown', @_onIFrameKeydown)
+ doc.removeEventListener('mousedown', @_onIFrameMouseEvent)
+ doc.removeEventListener('mousemove', @_onIFrameMouseEvent)
+ doc.removeEventListener('mouseup', @_onIFrameMouseEvent)
_subscribeToIFrameEvents: =>
doc = React.findDOMNode(@).contentDocument
_.defer =>
- doc.addEventListener "click", @_onIFrameClick
- doc.addEventListener "keydown", @_onIFrameKeydown
- doc.addEventListener "mousedown", @_onIFrameMouseEvent
- doc.addEventListener "mousemove", @_onIFrameMouseEvent
- doc.addEventListener "mouseup", @_onIFrameMouseEvent
+ doc.addEventListener("click", @_onIFrameClick)
+ doc.addEventListener("keydown", @_onIFrameKeydown)
+ doc.addEventListener("mousedown", @_onIFrameMouseEvent)
+ doc.addEventListener("mousemove", @_onIFrameMouseEvent)
+ doc.addEventListener("mouseup", @_onIFrameMouseEvent)
# The iFrame captures events that take place over it, which causes some
# interesting behaviors. For example, when you drag and release over the
diff --git a/src/sheet-container.cjsx b/src/sheet-container.cjsx
index 4fa5a672c..fffee56f7 100644
--- a/src/sheet-container.cjsx
+++ b/src/sheet-container.cjsx
@@ -181,7 +181,7 @@ class SheetContainer extends React.Component
sheetElements = @_sheetElements()
-