[PM-6507] Disregard collection of form input elements when they are children of a submit button (#8123)

* [PM-6507] Disregard collection of form input elements when they are children of a submit button

* [PM-6507] Disregard collection of form input elements when they are children of a submit button

* [PM-6507] Disregard collection of form input elements when they are children of a submit button

apps/browser/src/autofill/content/autofill-init.ts

@@ -99,9 +99,7 @@ class AutofillInit implements AutofillInitInterface {
       return pageDetails;
     }
 
-    // FIXME: Verify that this floating promise is intentional. If it is, add an explanatory comment and ensure there is proper error handling.
-    // eslint-disable-next-line @typescript-eslint/no-floating-promises
-    chrome.runtime.sendMessage({
+    void chrome.runtime.sendMessage({
       command: "collectPageDetailsResponse",
       tab: message.tab,
       details: pageDetails,

apps/browser/src/autofill/services/collect-autofill-content.service.spec.ts

@@ -807,6 +807,36 @@ describe("CollectAutofillContentService", () => {
   });
 
   describe("buildAutofillFieldItem", () => {
+    it("returns a `null` value if the field is a child of a `button[type='submit']`", async () => {
+      const usernameField = {
+        labelText: "Username",
+        id: "username-id",
+        type: "text",
+      };
+      document.body.innerHTML = `
+        <form>
+          <div>
+            <div>
+              <label for="${usernameField.id}">${usernameField.labelText}</label>
+              <button type="submit">
+                <input id="${usernameField.id}" type="${usernameField.type}" />
+              </button>
+            </div>
+          </div>
+        </form>
+      `;
+      const usernameInput = document.getElementById(
+        usernameField.id,
+      ) as ElementWithOpId<FillableFormFieldElement>;
+
+      const autofillFieldItem = await collectAutofillContentService["buildAutofillFieldItem"](
+        usernameInput,
+        0,
+      );
+
+      expect(autofillFieldItem).toBeNull();
+    });
+
     it("returns an existing autofill field item if it exists", async () => {
       const index = 0;
       const usernameField = {
@@ -847,27 +877,6 @@ describe("CollectAutofillContentService", () => {
           />
         </form>
       `;
-      document.body.innerHTML = `
-        <form>
-          <label for="${usernameField.id}">${usernameField.labelText}</label>
-          <input
-            id="${usernameField.id}"
-            class="${usernameField.classes}"
-            name="${usernameField.name}"
-            type="${usernameField.type}"
-            maxlength="${usernameField.maxLength}"
-            tabindex="${usernameField.tabIndex}"
-            title="${usernameField.title}"
-            autocomplete="${usernameField.autocomplete}"
-            data-label="${usernameField.dataLabel}"
-            aria-label="${usernameField.ariaLabel}"
-            placeholder="${usernameField.placeholder}"
-            rel="${usernameField.rel}"
-            value="${usernameField.value}"
-            data-stripe="${usernameField.dataStripe}"
-          />
-        </form>
-      `;
       const existingFieldData: AutofillField = {
         elementNumber: index,
         htmlClass: usernameField.classes,

apps/browser/src/autofill/services/collect-autofill-content.service.ts

@@ -92,9 +92,9 @@ class CollectAutofillContentService implements CollectAutofillContentServiceInte
     const { formElements, formFieldElements } = this.queryAutofillFormAndFieldElements();
     const autofillFormsData: Record<string, AutofillForm> =
       this.buildAutofillFormsData(formElements);
-    const autofillFieldsData: AutofillField[] = await this.buildAutofillFieldsData(
-      formFieldElements as FormFieldElement[],
-    );
+    const autofillFieldsData: AutofillField[] = (
+      await this.buildAutofillFieldsData(formFieldElements as FormFieldElement[])
+    ).filter((field) => !!field);
     this.sortAutofillFieldElementsMap();
 
     if (!autofillFieldsData.length) {
@@ -333,15 +333,18 @@ class CollectAutofillContentService implements CollectAutofillContentServiceInte
    * Builds an AutofillField object from the given form element. Will only return
    * shared field values if the element is a span element. Will not return any label
    * values if the element is a hidden input element.
-   * @param {ElementWithOpId<FormFieldElement>} element
-   * @param {number} index
-   * @returns {Promise<AutofillField>}
-   * @private
+   *
+   * @param element - The form field element to build the AutofillField object from
+   * @param index - The index of the form field element
    */
   private buildAutofillFieldItem = async (
     element: ElementWithOpId<FormFieldElement>,
     index: number,
-  ): Promise<AutofillField> => {
+  ): Promise<AutofillField | null> => {
+    if (element.closest("button[type='submit']")) {
+      return null;
+    }
+
     element.opid = `__${index}`;
 
     const existingAutofillField = this.autofillFieldElements.get(element);