Merge pull request #379 from US-CBP/bugfix/form-investigations

Bugfix/form investigations

Author: dgibson666

packages/web-components/src/components/cbp-file-input/cbp-file-input.tsx

@@ -209,7 +209,7 @@ export class CbpFileInput {
       const Id = this.formField.getAttribute('id');
       Id ? this.fieldId = Id : this.formField.setAttribute('id', this.fieldId);
       const Name = this.formField.getAttribute('name');
-      Name ? this.name = Name : this.formField.setAttribute('Name', this.name);
+      Name ? this.name = Name : (this.name ? this.formField.setAttribute('Name', this.name) : null);
 
       if (this.multiple) this.formField.setAttribute('multiple', '');
       if (this.accept) this.formField.setAttribute('accept', this.accept);

packages/web-components/src/components/cbp-form/cbp-form.tsx

@@ -46,7 +46,7 @@ export class CbpForm {
     // Add files from enhanced/multi-file inputs
     formData = this.addFiles(formData);
 
-    //console.log('resulting formData (array spread): ',[...formData]);
+    console.log('cbp-form - Resulting formData (array spread): ', [...formData]);
 
     // If the form submission is prevented, emit an event with the data instead
     if (this.preventSubmit) {
@@ -62,29 +62,26 @@ export class CbpForm {
   }
 
   addFiles(formData) {
-    /*
-      Update FormData (or create a copy) with fields not supported natively:
-      File input (multiple+enhanced, allowing manipulation of FileList)
-    */
+    // Update formData with enhanced/multi-file input (allowing manipulation of FileList)
     Object.keys(this.files).forEach( key => {
-      if (this.files?.[`${key}`]?.length > 0){
+      if (this.files?.[key]?.length > 0){
         // delete the empty key if there are files specified
         formData.delete(key);
         // loop over the files and add each as a new entry using append (set overrides the same entry)
         this.files?.[key].forEach( file => {
           formData.append(key, file);
         });
       }
-      formData[`${key}`] = this.files[`${key}`];
+      formData[key] = this.files[key];
     });
     return formData;
   }
 
   handleEnhancedFileInput(e) {
     // Keep tabs on enhanced/multi-file inputs' values
     const {name, value} = e.detail;
-    this.files[name] = value;
-    console.log('cbp-form - Tracking enhanced/multi-file input: ', this.files);
+    // Only bother if the input has a name
+    if(!!name) this.files[name] = value;
   }
 
   componentWillLoad() {

packages/web-components/src/stories/tests/form-processing.stories.tsx

@@ -268,13 +268,8 @@ function HTMLForm( {name, action, method, enctype, prefix, firstName, middleInit
         </cbp-slider>
       </cbp-form-field>
 
+      
       <!-- File Inputs -->
-      <label>
-        Native File Input<br />
-        <input type="file" name="nativefileinput" multiple/>
-      </label><br /><br />
-
- 
       <cbp-form-field label="Native File Input" description="Although styled as a design system input, this is a native file input in function.">
         <cbp-form-field-wrapper>
           <input type="file" name="nativefileinput" multiple>
@@ -322,10 +317,10 @@ const FormProcessingTemplate = ( args ) => {
 
   // Set up event handlers for logging and setting errors on files via the `status` prop.
   setTimeout(() => {
-    const formEl = document.querySelector(`form[name="${name}"]`) as HTMLFormElement;
+    const formEl = document.querySelector(`form[name="${args.name}"]`) as HTMLFormElement;
     const submitButton = document.querySelector('button[type=submit]') as HTMLButtonElement;
 
-    //console.log('Event Listeners set: ', formEl, submitButton);
+    console.log('Event Listeners set: ', formEl, submitButton);
 
     submitButton?.addEventListener('click', e => {
       console.log('Submit button pressed', submitButton, e);
@@ -349,13 +344,15 @@ const FormProcessingTemplate = ( args ) => {
        */
 
       // List key/value pairs
+      /*
       for(let [name, value] of formData) {
         console.log(`${name} =`, value);
       }
+      */
       // Spreading the formData as an array seems to give the same results as above.
-      console.log('formData (array spread): ',[...formData]);
+      console.log('Native form submit - formData (array spread): ',[...formData]);
       // This method makes the assumption that object keys are unique and only shows 1 value when they are not.
-      console.log('formData as JS Object: ', Object.fromEntries(formData.entries()));
+      //console.log('formData as JS Object: ', Object.fromEntries(formData.entries()));
 
       /*
       formData.append("CustomField", "This is some extra data");
@@ -367,7 +364,7 @@ const FormProcessingTemplate = ( args ) => {
       */
 
     });
-  }, 1000);
+  }, 2000);
 
  return `
     <h1>Native Form Tag</h1>
@@ -377,7 +374,9 @@ const FormProcessingTemplate = ( args ) => {
 };
 
 export const FormProcessing = FormProcessingTemplate.bind({});
-
+FormProcessing.args = {
+  name: 'nativeForm'
+}
 
 
 
@@ -386,7 +385,7 @@ const FormComponentProcessingTemplate = (args) => {
 
   // Set up event handlers for logging and setting errors on files via the `status` prop.
   setTimeout(() => {
-    const formEl = document.querySelector(`form[name="${name}"]`) as HTMLFormElement;
+    const formEl = document.querySelector(`form[name="${args.name}"]`) as HTMLFormElement;
     const submitButton = document.querySelector('button[type=submit]') as HTMLButtonElement;
 
     //console.log('Event Listeners set: ', formEl, submitButton);
@@ -397,39 +396,8 @@ const FormComponentProcessingTemplate = (args) => {
 
     formEl?.addEventListener('submit', e => {
       console.log('Native Form submit', formEl, e);
-      e.preventDefault();
-      
       let formData = new FormData(formEl);
-      // Data can be added to the formData for submission:
-      //formData.append("CustomField", "This is some extra data");
-
-      /*
-       * Because formData is an iterable, logging it does not show its name/value pairs.
-       * There are a number of ways to get at this, however, all of which require
-       * adding "dom.iterable", to compilerOptions > lib in tsconfig.json to avoid the 
-       * following TypeScript/compile error:
-       * 
-       * Type 'FormData' must have a '[Symbol.iterator]()' method that returns an iterator.
-       */
-      
-      // List key/value pairs
-      for(let [name, value] of formData) {
-        console.log(`${name} =`, value);
-      }
-      // Spreading the formData as an array seems to give the same results as above.
-      console.log('formData (array spread): ',[...formData]);
-      // This method makes the assumption that object keys are unique and only shows 1 value when they are not.
-      //console.log('formData as JS Object: ', Object.fromEntries(formData.entries()));
-
-      /*
-      formData.append("CustomField", "This is some extra data");
-      // formData can be manually submitted 
-      const response = await fetch("stash.php", {
-        method: "POST",
-        body: formData,
-      });
-      */
-
+      console.log('Native form submit - formData (array spread): ',[...formData]);
     });
   }, 1000);
 
@@ -445,4 +413,7 @@ const FormComponentProcessingTemplate = (args) => {
   `;
 };
 
-export const FormComponentProcessing = FormComponentProcessingTemplate.bind({});
+export const FormComponentProcessing = FormComponentProcessingTemplate.bind({});
+FormComponentProcessing.args = {
+  name: 'formComponent'
+}