From 20cf3277eac5cd444471147f6f55f46b20b3eaf2 Mon Sep 17 00:00:00 2001
From: HarshKhandeparkar <34770591+HarshKhandeparkar@users.noreply.github.com>
Date: Wed, 21 Nov 2018 03:16:07 +0530
Subject: [PATCH] Feature enter to save (#483)

* Flash Message bug fix

* enter-to-submit functionality added

* cleanup
---
 examples/lib/defaultHtmlStepUi.js | 15 ++++++++++++---
 1 file changed, 12 insertions(+), 3 deletions(-)

diff --git a/examples/lib/defaultHtmlStepUi.js b/examples/lib/defaultHtmlStepUi.js
index d337768b..fe4d4619 100644
--- a/examples/lib/defaultHtmlStepUi.js
+++ b/examples/lib/defaultHtmlStepUi.js
@@ -16,7 +16,7 @@ function stepRemovedNotify() {
     $('body').append(notification);
   }
 
-  $('#stepRemovedNotification').DOMNotification.fadeIn(500).delay(200).fadeOut(500);
+  $('#stepRemovedNotification').fadeIn(500).delay(200).fadeOut(500);
 }
 function DefaultHtmlStepUi(_sequencer, options) {
 
@@ -108,6 +108,7 @@ function DefaultHtmlStepUi(_sequencer, options) {
         var description = inputs[paramName].desc || paramName;
         div.innerHTML =
           "<div class='det'>\
+          <form class='input-form'>\
                            <label for='" +
           paramName +
           "'>" +
@@ -116,21 +117,28 @@ function DefaultHtmlStepUi(_sequencer, options) {
                            " +
           html +
           "\
+          </form>\
                          </div>";
         step.ui.querySelector("div.details").appendChild(div);
       }
 
       function toggleSaveButton(){
         $(step.ui.querySelector("div.details .btn-save")).prop("disabled",false);
+        focusInput();
       }
 
-      $(step.ui.querySelectorAll(".target")).focus(toggleSaveButton);
+      $(step.ui.querySelectorAll(".target")).on('change',toggleSaveButton);
 
       $(step.ui.querySelector("div.details")).append(
         "<p><button class='btn btn-default btn-save' disabled = 'true' >Save</button><span> Press save to see changes</span></p>"
       );
 
-      function saveOptions() {
+      function focusInput(){
+        $(step.ui.querySelector("div.details .target")).focus();
+      }
+
+      function saveOptions(e) {
+        e.preventDefault();
         $(step.ui.querySelector("div.details"))
           .find("input,select")
           .each(function(i, input) {
@@ -146,6 +154,7 @@ function DefaultHtmlStepUi(_sequencer, options) {
 
       // on clicking Save in the details pane of the step
       $(step.ui.querySelector("div.details .btn-save")).click(saveOptions);
+      $(step.ui.querySelector("div.details .input-form")).on('submit', saveOptions);
     }
 
     if (step.name != "load-image")