get button working

src/components/button/button.component.ts

@@ -6,12 +6,12 @@ import { LocalizeController } from '../../utilities/localize.js';
 import { property, query, state } from 'lit/decorators.js';
 import { watch } from '../../internal/watch.js';
 import { WebAwesomeFormAssociated } from '../../internal/webawesome-element.js';
+import { MirrorValidator } from '../../internal/validators/mirror-validator.js';
 import componentStyles from '../../styles/component.styles.js';
 import styles from './button.styles.js';
 import WaIcon from '../icon/icon.component.js';
 import WaSpinner from '../spinner/spinner.component.js';
 import type { CSSResultGroup } from 'lit';
-import { MirrorValidator } from '../../internal/validators/mirror-validator.js';
 
 /**
  * @summary Buttons represent actions that are available to the user.
@@ -133,7 +133,7 @@ export default class WaButton extends WebAwesomeFormAssociated {
    * The "form owner" to associate the button with. If omitted, the closest containing form will be used instead. The
    * value of this attribute must be an id of a form in the same document or shadow root as the button.
    */
-  @property() form: null | string;
+  @property({ reflect: true }) form: string | null = null
 
   /** Used to override the form owner's `action` attribute. */
   @property({ attribute: 'formaction' }) formAction: string;

src/components/button/button.test.ts

@@ -1,5 +1,5 @@
 import '../../../dist/webawesome.js';
-import { expect, fixture, html, waitUntil } from '@open-wc/testing';
+import { aTimeout, expect, fixture, html, waitUntil } from '@open-wc/testing';
 import { runFormControlBaseTests } from '../../internal/test/form-control-base-tests.js';
 import sinon from 'sinon';
 import type WaButton from './button.js';
@@ -206,6 +206,44 @@ describe('<wa-button>', () => {
       expect(submitter.formTarget).to.equal('_blank');
       expect(submitter.formNoValidate).to.be.true;
     });
+
+    it("should only submit button name / value pair when the form is submitted", async () => {
+      const form = await fixture<HTMLFormElement>(html`<form>
+        <wa-button type="submit" name="btn-1" value="value-1">Button 1</wa-button>
+        <wa-button type="submit" name="btn-2" value="value-2">Button 2</wa-button>
+      </form>`);
+
+      let formData = new FormData(form)
+      let submitter: null | HTMLButtonElement = document.createElement("button")
+
+
+      form.addEventListener("submit", (e) => {
+        e.preventDefault()
+        formData = new FormData(form)
+        submitter = e.submitter as HTMLButtonElement
+      })
+
+      expect(formData.get("btn-1")).to.be.null
+      expect(formData.get("btn-2")).to.be.null
+
+      form.querySelector("wa-button")?.click()
+      await aTimeout(0)
+
+      expect(formData.get("btn-1")).to.be.null
+      expect(formData.get("btn-2")).to.be.null
+
+      expect(submitter.name).to.equal("btn-1")
+      expect(submitter.value).to.equal("value-1")
+
+      form.querySelectorAll("wa-button")[1]?.click()
+      await aTimeout(0)
+
+      expect(formData.get("btn-1")).to.be.null
+      expect(formData.get("btn-2")).to.be.null
+
+      expect(submitter.name).to.equal("btn-2")
+      expect(submitter.value).to.equal("value-2")
+    })
   });
 
   describe('when using methods', () => {

src/internal/test/form-control-base-tests.ts

@@ -220,20 +220,20 @@ function runSpecialTests_slButtonWithHref(createControl: CreateControlFn) {
     expect(control.reportValidity()).to.equal(false);
   });
 
-  it('should not emit an `wa-invalid` event when `.checkValidity()` is called in custom error case', async () => {
+  it('should emit an `wa-invalid` event when `.checkValidity()` is called in custom error case', async () => {
     const control = await createControl();
     control.setCustomValidity('error');
     await control.updateComplete;
     const emittedEvents = checkEventEmissions(control, 'wa-invalid', () => control.checkValidity());
-    expect(emittedEvents.length).to.equal(0);
+    expect(emittedEvents.length).to.equal(1);
   });
 
-  it('should not emit an `wa-invalid` event when `.reportValidity()` is called in custom error case', async () => {
+  it('should emit an `wa-invalid` event when `.reportValidity()` is called in custom error case', async () => {
     const control = await createControl();
     control.setCustomValidity('error');
     await control.updateComplete;
     const emittedEvents = checkEventEmissions(control, 'wa-invalid', () => control.reportValidity());
-    expect(emittedEvents.length).to.equal(0);
+    expect(emittedEvents.length).to.equal(1);
   });
 }
 

src/internal/webawesome-element.ts

@@ -433,8 +433,6 @@ export class WebAwesomeFormAssociated
   }
 
   updateValidity() {
-    const parentForm = this.getForm()
-
     if (this.disabled || this.getAttribute('disabled')) {
       this.setValidity({});
       // We don't run validators on disabled thiss to be inline with native HTMLElements.