Emit editor blur events as if no hidden input existed

spec/text-editor-component-spec.js

@@ -322,6 +322,20 @@ describe('TextEditorComponent', () => {
 
       expect(document.activeElement).toBe(component.refs.hiddenInput)
     })
+
+    it('emits blur events only when focus shifts to something other than the editor itself or its hidden input', () => {
+      const {element} = buildComponent()
+
+      let blurEventCount = 0
+      element.addEventListener('blur', () => blurEventCount++)
+
+      element.focus()
+      expect(blurEventCount).toBe(0)
+      element.focus()
+      expect(blurEventCount).toBe(0)
+      document.body.focus()
+      expect(blurEventCount).toBe(1)
+    })
   })
 
   describe('autoscroll on cursor movement', () => {

src/text-editor-component.js

@@ -166,7 +166,10 @@ class TextEditorComponent {
         attributes,
         style,
         tabIndex: -1,
-        on: {focus: this.didFocus}
+        on: {
+          focus: this.didFocus,
+          blur: this.didBlur
+        }
       },
       $.div(
         {
@@ -707,10 +710,17 @@ class TextEditorComponent {
     }
   }
 
+  didBlur (event) {
+    if (event.relatedTarget === this.refs.hiddenInput) {
+      event.stopImmediatePropagation()
+    }
+  }
+
   didBlurHiddenInput (event) {
     if (this.element !== event.relatedTarget && !this.element.contains(event.relatedTarget)) {
       this.focused = false
       this.scheduleUpdate()
+      this.element.dispatchEvent(new FocusEvent(event.type, event))
     }
   }