From 47e83a41482ef540b37a2b211dbbeda6e44066c5 Mon Sep 17 00:00:00 2001
From: Matt Mo <matt@montoyatech.com>
Date: Sat, 9 Jan 2021 16:26:51 -0800
Subject: [PATCH] Improved change event on editable-label to bubble. Cleaned up
 some code as well.

---
 editable-label.js | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/editable-label.js b/editable-label.js
index 308400f..d421cd7 100644
--- a/editable-label.js
+++ b/editable-label.js
@@ -87,7 +87,7 @@ class EditableLabel extends IgniteElement {
             .class(this.border, value => value ? null : "no-border")
             .class(this.editing, value => value ? "editing" : null)
             .class([this.editing, this.truncate], (editing, truncate) => !editing && truncate ? "truncate" : null)
-            .onFocus(e => this.onFocus())
+            .onFocus(e => this.onFocus(e))
             .child(
                 new div()
                     .innerHTML(this.value)
@@ -95,10 +95,10 @@ class EditableLabel extends IgniteElement {
                     .attribute("contenteditable", this.editing)
                     .data("placeholder", this.placeholder)
                     .ref(this.input)
-                    .onBlur(() => this.onBlur())
+                    .onBlur(e => this.onBlur(e))
                     .on("keydown", (e) => this.onKeyDown(e)),
                 new button(`<i class="fas fa-check"></i>`)
-                    .onClick(() => this.onBlur())
+                    .onClick(e => this.onBlur(e))
                     .style("display", this.editing, true, (value) => { return value && this.saveButton ? null : "none" })
             );
     }
@@ -111,7 +111,7 @@ class EditableLabel extends IgniteElement {
         }
     }
 
-    onBlur() {
+    onBlur(e) {
         if (this.editing) {
             if (this.stopEditingOnBlur) {
                 this.editing = false;
@@ -121,12 +121,12 @@ class EditableLabel extends IgniteElement {
                 this.value = this.input.innerHTML;
 
                 //Dispatch a native change event 
-                this.dispatchEvent(new Event("change"));
+                this.dispatchEvent(new CustomEvent("change", { bubbles: true }));
             }
         }
     }
 
-    onFocus() {
+    onFocus(e) {
         this.editing = true;
         this.input.focus();
         this.placeCaretAtEnd(this.input);