Merge pull request #3090 from codefori/fixEnterForms

sebjulliand · web-flow · commit ce86dc2db502 · 2026-03-11T11:51:07.000+01:00
Fix Enter key handling in Custom UI and Editors forms
diff --git a/src/editors/customEditorProvider.ts b/src/editors/customEditorProvider.ts
@@ -15,21 +15,25 @@ export class CustomEditor<T> extends CustomHTML implements vscode.CustomDocument
 
   protected getSpecificScript() {
     return /* javascript */ `
+      const theForm = document.querySelector('#laforma');
       for (const field of submitfields) {
         const fieldElement = document.getElementById(field);
         fieldElement.addEventListener(inputFields.some(f => f.id === field) ? 'input' : 'change', function(event) {
           event?.preventDefault();
           const data = {};
-          new FormData(document.querySelector('#laforma')).entries().forEach(([key, value]) => data[key] = value);
+          new FormData(theForm).entries().forEach(([key, value]) => data[key] = value);
 
           // Convert checkboxes value to actual boolean
           checkboxes.forEach(checkbox => data[checkbox] = (data[checkbox] === 'on'));
 
           data.valid = validateInputs();
 
           vscode.postMessage({ type: 'dataChange', data });
-        });        
+        });
       }
+
+      //Prevent form from being submitted
+      theForm.addEventListener("submit", (event) => event?.preventDefault());
     `;
   }
 
diff --git a/src/webviews/CustomUI.ts b/src/webviews/CustomUI.ts
@@ -166,7 +166,7 @@ export class CustomHTML extends Section {
   }
 
   protected getHTML(panel: vscode.WebviewPanel, title: string) {
-    const notInputFields = [`submit`, `buttons`, `tree`, `hr`, `paragraph`, `tabs`, `complexTabs`, 'browser'] as FieldType[];
+    const notInputFields = [`submit`, `buttons`, `tree`, `hr`, `paragraph`, `tabs`, `complexTabs`, 'browser', 'heading'] as FieldType[];
     const trees = this.fields.filter(field => [`tree`, 'browser'].includes(field.type));
 
     const complexTabFields = this.fields.filter(field => field.type === `complexTabs`).map(tabs => tabs.complexTabItems?.map(tab => tab.fields));
@@ -175,12 +175,12 @@ export class CustomHTML extends Section {
     return /*html*/`
     <!DOCTYPE html>
     <html lang="en">
-    
+
     <head>
         <meta charset="UTF-8">
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
         <title>${title}</title>
-    
+
         <script type="module">${vscodeweb}</script>
         <style>
             @media only screen and (min-width: 750px) {
@@ -216,13 +216,13 @@ export class CustomHTML extends Section {
               overflow: auto;
             }
 
-            pre{              
+            pre{
               background-color: var(--vscode-textPreformat-background);
             }
             ${this.options?.css || ""}
         </style>
     </head>
-    
+
     <body>
     ${this.options?.fullPage ?
         this.fields.map(field => field.getHTML()).join(``) :
@@ -231,9 +231,9 @@ export class CustomHTML extends Section {
         ${this.fields.map(field => field.getHTML()).join(``)}
       </form>
         `
-      }        
+      }
     </body>
-    
+
     <script>
         (function () {
             const vscode = acquireVsCodeApi();
@@ -272,7 +272,7 @@ export class CustomHTML extends Section {
                     }
                   }
                   validateInputs(response.field);
-                }              
+                }
               }
             });
 
@@ -310,13 +310,13 @@ export class CustomHTML extends Section {
                 }
               }
 
-              // If not validating a specific field, 
+              // If not validating a specific field,
               // then we can enable/disable certain buttons
               if (!optionalId) {
                 for (const fieldData of groupButtons) {
                   if (fieldData.requiresValidation) {
                     const field = fieldData.id;
-                    
+
                     let button = document.getElementById(field);
                     if (isValid) {
                       button.removeAttribute("disabled");
@@ -328,7 +328,7 @@ export class CustomHTML extends Section {
               }
 
               return isValid;
-            }            
+            }
 
             const treeItemClick = (treeId, type, value) => {
               if(type === "browse"){
@@ -337,7 +337,7 @@ export class CustomHTML extends Section {
               }
               else{
                 vscode.postMessage({ type, data: {treeId, value} });
-              }              
+              }
             }
 
             const doFileRequest = (event, fieldId) => {
@@ -351,7 +351,7 @@ export class CustomHTML extends Section {
             for (const field of inputFields) {
               const fieldElement = document.getElementById(field.id);
               fieldElement.addEventListener("change", (e) => validateInputs());
-            }            
+            }
 
             // This is used to read the file in order to get the real path.
             for (const field of filefields) {
@@ -362,23 +362,23 @@ export class CustomHTML extends Section {
             }
 
             document.addEventListener('DOMContentLoaded', () => {
-              validateInputs(); 
+              validateInputs();
               var currentTree;
               ${trees.map(tree => /* javascript */`
                 currentTree = document.getElementById('${tree.id}');
                 currentTree.data = ${JSON.stringify(tree.treeList)};
                 currentTree.addEventListener('vsc-tree-select', (event) => {
                   console.log(JSON.stringify(event.detail));
                   if (event.detail.itemType === 'leaf') {
-                    treeItemClick('${tree.id}', '${tree.treeLeafAction}', event.detail.value);                      
+                    treeItemClick('${tree.id}', '${tree.treeLeafAction}', event.detail.value);
                   }
                 });`
       )}
             });
             ${this.getSpecificScript()}
         }())
     </script>
-    
+
     </html>`;
   }
 }
@@ -387,7 +387,7 @@ export class CustomUI extends CustomHTML {
   /**
    * If no callback is provided, a Promise will be returned.
    * If the page is already opened, it grabs the focus and return no Promise (as it's alreay handled by the first call).
-   * 
+   *
    * @param title the title displayed in the webview tab
    * @param checkData an optional function that can check and updates the data before they are returned. If it returns `false`, the view will stay open.
    * @returns a Promise<Page<T>> if no callback is provided
@@ -464,59 +464,32 @@ export class CustomUI extends CustomHTML {
 
   protected getSpecificScript() {
     return /* javascript */ `
-      const doDone = (event, buttonId) => {
-        console.log('submit now!!', buttonId)
+      const theForm = document.querySelector('#laforma');
+
+      const doDone = (event, button) => {
+        console.log('submit now!!', button || 'enter pressed')
         event?.preventDefault();
-        
-        const data = { buttons: buttonId };
-        new FormData(document.querySelector('#laforma')).entries().forEach(([key, value]) => data[key] = value);
+        const isValid = (!button || button.requiresValidation) ? validateInputs() : true;
+        if (isValid) {
+          const data = { buttons: button?.id };
+          new FormData(theForm).entries().forEach(([key, value]) => data[key] = value);
 
-        // Convert checkboxes value to actual boolean
-        checkboxes.forEach(checkbox => data[checkbox] = (data[checkbox] === 'on'));
+          // Convert checkboxes value to actual boolean
+          checkboxes.forEach(checkbox => data[checkbox] = (data[checkbox] === 'on'));
 
-        vscode.postMessage({ type: 'submit', data });
+          vscode.postMessage({ type: 'submit', data });
+        }
       };
 
+      //Pressing enter will submit the form
+      theForm.addEventListener("submit", doDone);
+
       // Now many buttons can be pressed to submit
       for (const fieldData of groupButtons) {
-        const field = fieldData.id;
-        
-        console.log('group button', fieldData, document.getElementById(field));
-        var button = document.getElementById(field);
-
-        const submitButtonAction = (event) => {
-          const isValid = fieldData.requiresValidation ? validateInputs() : true;
-          console.log({requiresValidation: fieldData.requiresValidation, isValid});
-          if (isValid) doDone(event, field);
-        }
+        const button = document.getElementById(fieldData.id);
 
-        button.onclick = submitButtonAction;
-        button.onKeyDown = submitButtonAction;
-      }
-
-      for (const field of submitfields) {
-          const currentElement = document.getElementById(field);
-          if (currentElement.hasAttribute('rows')) {
-            currentElement
-              .addEventListener('keyup', function(event) {
-                  event.preventDefault();
-                  if (event.keyCode === 13 && event.altKey) {
-                    if (validateInputs()) {
-                      doDone();
-                    }
-                  }
-              });
-          } else {
-            currentElement
-              .addEventListener('keyup', function(event) {
-                  event.preventDefault();
-                  if (event.keyCode === 13) {
-                    if (validateInputs()) {
-                      doDone();
-                    }
-                  }
-              });
-          }
+        button.onclick = () => doDone(event, fieldData);
+        button.onKeyDown = () => doDone(event, fieldData);
       }
     `;
   }
@@ -623,13 +596,13 @@ export class Field {
         return /* html */`
           <vscode-form-group variant="settings-group">
               ${this.renderLabel()}
-              ${this.renderDescription()}              
-              <${tag} class="long-input" id="${this.id}" name="${this.id}" 
-                ${this.inputType ? `type="${this.inputType}"` : ``} 
-                ${this.default ? `value="${this.default}"` : ``} 
-                ${this.readonly ? `readonly` : ``} 
+              ${this.renderDescription()}
+              <${tag} class="long-input" id="${this.id}" name="${this.id}"
+                ${this.inputType ? `type="${this.inputType}"` : ``}
+                ${this.default ? `value="${this.default}"` : ``}
+                ${this.readonly ? `readonly` : ``}
                 ${multiline ? `rows="${this.rows}" resize="vertical"` : ''}
-                ${this.minlength ? `minlength="${this.minlength}"` : ``} 
+                ${this.minlength ? `minlength="${this.minlength}"` : ``}
                 ${this.maxlength ? `maxlength="${this.maxlength}"` : ``}
                 ${this.min ? `min="${this.min}"` : ``}
                 ${this.max ? `max="${this.max}"` : ``}
