Do not update image file on blur if canvas is empty (#931)

src/widget/draw/draw-widget.js

@@ -135,10 +135,13 @@ class DrawWidget extends Widget {
             this._handleFiles(existingFilename);
         }
 
+        // This listener serves to capture a drawing when the submit button is clicked within [DELAY]
+        // milliseconds after the last stroke ended. Note that this could be the entire drawing/signature.
+        canvas.addEventListener('blur', this._forceUpdate.bind(this));
+
         // We built a delay in saving on stroke "end", to avoid excessive updating
         // This event does not fire on touchscreens for which we use the .hide-canvas-btn click
         // to do the same thing.
-        canvas.addEventListener('blur', this._forceUpdate.bind(this));
 
         this.initialize = fileManager.init().then(() => {
             that.pad = new SignaturePad(canvas, {
@@ -463,7 +466,7 @@ class DrawWidget extends Widget {
         const that = this;
 
         if (this.element.value) {
-            // This discombulated line is to help the i18next parser pick up all 3 keys.
+            // This discombobulated line is to help the i18next parser pick up all 3 keys.
             const item =
                 this.props.type === 'signature'
                     ? t('drawwidget.signature')
@@ -484,6 +487,11 @@ class DrawWidget extends Widget {
                     delete that.element.dataset.loadedUrl;
                     that.element.dataset.filenamePostfix = '';
                     $(that.element).val('').trigger('change');
+                    if (that._updateWithDelay) {
+                        // This ensures that an emptied canvas will not be considered a drawing to be captured
+                        // in _forceUpdate, e.g. after the blur event fires on an empty canvas see issue #924
+                        that._updateWithDelay = null;
+                    }
                     // Annotate file input
                     that.$widget
                         .find('input[type=file]')