From e4846a96de25537d9944ce1ee487fafaf4087bc1 Mon Sep 17 00:00:00 2001
From: Matt Mo <matt@montoyatech.com>
Date: Tue, 17 Nov 2020 19:56:27 -0800
Subject: [PATCH] Removed onLoad and onChange since we just use the native
 events now. Fixed an issue where onChange was fired before the new image was
 actually loaded.

---
 editable-image.js | 15 ++++++++-------
 1 file changed, 8 insertions(+), 7 deletions(-)

diff --git a/editable-image.js b/editable-image.js
index ca44fc6..9fb089d 100644
--- a/editable-image.js
+++ b/editable-image.js
@@ -47,8 +47,6 @@ class EditableImage extends IgniteElement {
         return {
             source: null,
             fileInput: null,
-            onChange: null,
-            onLoad: null,
             objectFit: "contain",
             objectPosition: "center",
             width: null,
@@ -76,7 +74,7 @@ class EditableImage extends IgniteElement {
                     .style("height", this.height)
                     .style("max-height", this.maxHeight)
                     .hide(this.source, value => { return value == null; })
-                    .on("load", this.onLoad),
+                    .on("load", () => this.dispatchEvent(new Event("load"))),
                 new input()
                     .type("file")
                     .style("display", "none", true)
@@ -86,6 +84,10 @@ class EditableImage extends IgniteElement {
     }
 
     onFileChange(event) {
+        //Prevent this event from bubbling up since we haven't
+        //actually changed anything yet, just the inner input changed.
+        event.stopPropagation();
+
         //Get the uploaded file from the file input.
         var file = this.fileInput.files[0];
 
@@ -94,10 +96,9 @@ class EditableImage extends IgniteElement {
         reader.onload = (event) => {
             this.source = event.target.result;
 
-            //If we have a on change event then invoke it.
-            if (this.onChange != null) {
-                this.onChange(this.source);
-            }
+            //Invoke a native change event now that we have
+            //the image file ready.
+            this.dispatchEvent(new Event("change"));
         };
 
         //Read it.