src/snek/static/generic-form.js

@@ -62,7 +62,7 @@ class GenericField extends HTMLElement {
 
   constructor() {
     super();
-    this.attachShadow({ mode: 'open' });
+    this.attachShadow({mode: 'open'});
     this.container = document.createElement('div');
     this.styleElement = document.createElement('style');
     this.styleElement.innerHTML = `
@@ -165,18 +165,26 @@ class GenericField extends HTMLElement {
       const me = this;
       this.inputElement.addEventListener("keyup", (e) => {
         if (e.key === 'Enter') {
+          const event = new CustomEvent("change", {detail: me, bubbles: true});
+          me.dispatchEvent(event);
+
           me.dispatchEvent(new Event("submit"));
         } else if (me.field.value !== e.target.value) {
-          const event = new CustomEvent("change", { detail: me, bubbles: true });
+          const event = new CustomEvent("change", {detail: me, bubbles: true});
           me.dispatchEvent(event);
         }
       });
 
       this.inputElement.addEventListener("click", (e) => {
-        const event = new CustomEvent("click", { detail: me, bubbles: true });
+        const event = new CustomEvent("click", {detail: me, bubbles: true});
         me.dispatchEvent(event);
       });
 
+      this.inputElement.addEventListener("blur", (e) => {
+        const event = new CustomEvent("change", {detail: me, bubbles: true});
+        me.dispatchEvent(event);
+      }, true);
+
       this.container.appendChild(this.inputElement);
     }
 
@@ -226,7 +234,7 @@ class GenericForm extends HTMLElement {
 
   constructor() {
     super();
-    this.attachShadow({ mode: 'open' });
+    this.attachShadow({mode: 'open'});
     this.styleElement = document.createElement("style");
     this.styleElement.innerHTML = `
 
@@ -307,6 +315,16 @@ class GenericForm extends HTMLElement {
             }
           }
         });
+
+        fieldElement.addEventListener("submit", async (e) => {
+          const isValid = await this.validate();
+          if (isValid) {
+            const saveResult = await this.submit();
+            if (saveResult.redirect_url) {
+              window.location.pathname = saveResult.redirect_url;
+            }
+          }
+        })
       });
 
     } catch (error) {
@@ -322,7 +340,7 @@ class GenericForm extends HTMLElement {
       headers: {
         'Content-Type': 'application/json'
       },
-      body: JSON.stringify({ "action": "validate", "form": this.form })
+      body: JSON.stringify({"action": "validate", "form": this.form})
     });
 
     const form = await response.json();
@@ -353,7 +371,7 @@ class GenericForm extends HTMLElement {
       headers: {
         'Content-Type': 'application/json'
       },
-      body: JSON.stringify({ "action": "submit", "form": this.form })
+      body: JSON.stringify({"action": "submit", "form": this.form})
     });
     return await response.json();
   }