- Working on ui-popup adding some features based on FORM inside of it

asset/webcomponent/module/ui-popup.js

@@ -68,8 +68,6 @@ class UiPopup extends Webcomponent {
                         trigger.dispatchEvent(ev);
                         break;
 
-
-                    case  8: // BACKSPACE
                     case 27: // ESC
                         trigger = this.querySelector('[action="close"]');
                         ev = new CustomEvent('click', { trigger: trigger } );
@@ -116,10 +114,19 @@ class UiPopup extends Webcomponent {
             case "confirm":
             case "yes":
             case "ok":
-                this.actionFollowLink(element)  ||
+                let retval = this.actionFollowLink(element)  ||
-                this.actionClickButton(element) ||
+                    this.actionClickButton(element);
-                this.actionSendForm(element) ||
+                if (! retval) {
-                this.actionSendForm(this.trigger);
+                    retval = this.actionSendForm(element) ||
+                        this.actionSendForm(this.trigger) ||
+                        this.actionSendForm(element.closest('ui-popup').querySelector('form'));
+
+                    if ( ! retval ) {
+                        throw "No action to trigger automatically on Popup confirmation.";
+                    }
+
+                    break;
+                }
 
             case "cancel":
             case "no":
@@ -189,18 +196,30 @@ class UiPopup extends Webcomponent {
     }
 
     actionSendForm(element) {
+        if ( ! element ) {
+            return false;
+        }
+
         //if ( element.getAttribute('send-form') !== null ) {
         //let form = this.trigger.tagName === "FORM" ? this.trigger : this.trigger.closest('FORM');
         let form = element.tagName === "FORM" ? element : element.closest('FORM');
 
         if ( form ) {
-            form.submit();
+//            form.addEventListener("submit", e => this.hide);
+
+            let submitBtn = form.querySelector("button[type='submit']");
+
+            if (submitBtn) {
+                submitBtn.click();
+            }
+            else {
+                form.submit();
+            }
 
             return true;
         }
-        else {
+
-            throw "A send-form action was set on a popup where the trigger as no parent form.";
+        return false;
-        }
         //}
     }
 

view/webcomponent/ui-popup.phtml

@@ -1,5 +1,5 @@
 <style>
-    ui-popup:not(.modal) {box-shadow:0px 0px 0px 9999px rgba(0, 0, 0, 0.5);z-index:9999;transition:all 0.3s ease-out;background:#fff;position:fixed!important;top:0;left: 50%;transform:translate(-50%, 15%);}
+    ui-popup:not(.modal) {box-shadow:0px 0px 0px 9999px rgba(0, 0, 0, 0.5);z-index:9999;transition:all 0.3s ease-out;background:#fff;position:fixed!important;top:0;left: 50%;transform:translate(-50%, 5vh);}
     ui-popup:not(.visible) {transform: translate(-50%, -100%);transition-timing-function: ease-in;translate(-50%, -100%);box-shadow:none;}
     ui-popup.modal.visible {display:flex}
     ui-popup > * {padding:1.5rem}