From 5a9f7da562446f5e628d29fdc83490113103310e Mon Sep 17 00:00:00 2001
From: Elizabeth Mitchell <lizmitchell@google.com>
Date: Tue, 10 Mar 2026 11:19:42 -0700
Subject: [PATCH] feat(labs): change form-submitter to a behavior mixin

PiperOrigin-RevId: 881533609
---
 button/internal/button.ts                     |  35 +----
 iconbutton/internal/icon-button.ts            |  33 +----
 internal/controller/form-submitter.ts         | 130 ----------------
 labs/behaviors/form-submitter.ts              | 140 ++++++++++++++++++
 .../behaviors}/form-submitter_test.ts         |  16 +-
 5 files changed, 153 insertions(+), 201 deletions(-)
 delete mode 100644 internal/controller/form-submitter.ts
 create mode 100644 labs/behaviors/form-submitter.ts
 rename {internal/controller => labs/behaviors}/form-submitter_test.ts (91%)

diff --git a/button/internal/button.ts b/button/internal/button.ts
index 9e8530a394..47c5ed4968 100644
--- a/button/internal/button.ts
+++ b/button/internal/button.ts
@@ -12,11 +12,6 @@ import {property, query, queryAssignedElements} from 'lit/decorators.js';
 
 import {ARIAMixinStrict} from '../../internal/aria/aria.js';
 import {mixinDelegatesAria} from '../../internal/aria/delegate.js';
-import {
-  FormSubmitter,
-  setupFormSubmitter,
-  type FormSubmitterType,
-} from '../../internal/controller/form-submitter.js';
 import {
   dispatchActivationClick,
   isActivationClick,
@@ -25,18 +20,17 @@ import {
   internals,
   mixinElementInternals,
 } from '../../labs/behaviors/element-internals.js';
+import {mixinFormSubmitter} from '../../labs/behaviors/form-submitter.js';
 
 // Separate variable needed for closure.
-const buttonBaseClass = mixinDelegatesAria(mixinElementInternals(LitElement));
+const buttonBaseClass = mixinDelegatesAria(
+  mixinFormSubmitter(mixinElementInternals(LitElement)),
+);
 
 /**
  * A button component.
  */
-export abstract class Button extends buttonBaseClass implements FormSubmitter {
-  static {
-    setupFormSubmitter(Button);
-  }
-
+export abstract class Button extends buttonBaseClass {
   /** @nocollapse */
   static readonly formAssociated = true;
 
@@ -95,25 +89,6 @@ export abstract class Button extends buttonBaseClass implements FormSubmitter {
   @property({type: Boolean, attribute: 'has-icon', reflect: true}) hasIcon =
     false;
 
-  /**
-   * The default behavior of the button. May be "button", "reset", or "submit"
-   * (default).
-   */
-  @property() type: FormSubmitterType = 'submit';
-
-  /**
-   * The value added to a form with the button's name when the button submits a
-   * form.
-   */
-  @property({reflect: true}) value = '';
-
-  get name() {
-    return this.getAttribute('name') ?? '';
-  }
-  set name(name: string) {
-    this.setAttribute('name', name);
-  }
-
   /**
    * The associated form element with which this element's value will submit.
    */
diff --git a/iconbutton/internal/icon-button.ts b/iconbutton/internal/icon-button.ts
index 106e08954b..a486982361 100644
--- a/iconbutton/internal/icon-button.ts
+++ b/iconbutton/internal/icon-button.ts
@@ -14,11 +14,6 @@ import {literal, html as staticHtml} from 'lit/static-html.js';
 
 import {ARIAMixinStrict} from '../../internal/aria/aria.js';
 import {mixinDelegatesAria} from '../../internal/aria/delegate.js';
-import {
-  FormSubmitter,
-  setupFormSubmitter,
-  type FormSubmitterType,
-} from '../../internal/controller/form-submitter.js';
 import {isRtl} from '../../internal/controller/is-rtl.js';
 import {
   afterDispatch,
@@ -28,12 +23,13 @@ import {
   internals,
   mixinElementInternals,
 } from '../../labs/behaviors/element-internals.js';
+import {mixinFormSubmitter} from '../../labs/behaviors/form-submitter.js';
 
 type LinkTarget = '_blank' | '_parent' | '_self' | '_top';
 
 // Separate variable needed for closure.
 const iconButtonBaseClass = mixinDelegatesAria(
-  mixinElementInternals(LitElement),
+  mixinFormSubmitter(mixinElementInternals(LitElement)),
 );
 
 /**
@@ -43,11 +39,7 @@ const iconButtonBaseClass = mixinDelegatesAria(
  * --composed
  * @fires change {Event} Dispatched when a toggle button toggles --bubbles
  */
-export class IconButton extends iconButtonBaseClass implements FormSubmitter {
-  static {
-    setupFormSubmitter(IconButton);
-  }
-
+export class IconButton extends iconButtonBaseClass {
   /** @nocollapse */
   static readonly formAssociated = true;
 
@@ -113,25 +105,6 @@ export class IconButton extends iconButtonBaseClass implements FormSubmitter {
    */
   @property({type: Boolean, reflect: true}) selected = false;
 
-  /**
-   * The default behavior of the button. May be "button", "reset", or "submit"
-   * (default).
-   */
-  @property() type: FormSubmitterType = 'submit';
-
-  /**
-   * The value added to a form with the button's name when the button submits a
-   * form.
-   */
-  @property({reflect: true}) value = '';
-
-  get name() {
-    return this.getAttribute('name') ?? '';
-  }
-  set name(name: string) {
-    this.setAttribute('name', name);
-  }
-
   /**
    * The associated form element with which this element's value will submit.
    */
diff --git a/internal/controller/form-submitter.ts b/internal/controller/form-submitter.ts
deleted file mode 100644
index 39d3d313a3..0000000000
--- a/internal/controller/form-submitter.ts
+++ /dev/null
@@ -1,130 +0,0 @@
-/**
- * @license
- * Copyright 2023 Google LLC
- * SPDX-License-Identifier: Apache-2.0
- */
-
-import {isServer, ReactiveElement} from 'lit';
-
-import {
-  internals,
-  WithElementInternals,
-} from '../../labs/behaviors/element-internals.js';
-
-/**
- * A string indicating the form submission behavior of the element.
- *
- * - submit: The element submits the form. This is the default value if the
- * attribute is not specified, or if it is dynamically changed to an empty or
- * invalid value.
- * - reset: The element resets the form.
- * - button: The element does nothing.
- */
-export type FormSubmitterType = 'button' | 'submit' | 'reset';
-
-/**
- * An element that can submit or reset a `<form>`, similar to
- * `<button type="submit">`.
- */
-export interface FormSubmitter extends ReactiveElement, WithElementInternals {
-  /**
-   * A string indicating the form submission behavior of the element.
-   *
-   * - submit: The element submits the form. This is the default value if the
-   * attribute is not specified, or if it is dynamically changed to an empty or
-   * invalid value.
-   * - reset: The element resets the form.
-   * - button: The element does nothing.
-   */
-  type: FormSubmitterType;
-
-  /**
-   * The HTML name to use in form submission. When combined with a `value`, the
-   * submitting button's name/value will be added to the form.
-   *
-   * Names must reflect to a `name` attribute for form integration.
-   */
-  name: string;
-
-  /**
-   * The value of the button. When combined with a `name`, the submitting
-   * button's name/value will be added to the form.
-   */
-  value: string;
-}
-
-type FormSubmitterConstructor =
-  | (new () => FormSubmitter)
-  | (abstract new () => FormSubmitter);
-
-/**
- * Sets up an element's constructor to enable form submission. The element
- * instance should be form associated and have a `type` property.
- *
- * A click listener is added to each element instance. If the click is not
- * default prevented, it will submit the element's form, if any.
- *
- * @example
- * ```ts
- * class MyElement extends mixinElementInternals(LitElement) {
- *   static {
- *     setupFormSubmitter(MyElement);
- *   }
- *
- *   static formAssociated = true;
- *
- *   type: FormSubmitterType = 'submit';
- * }
- * ```
- *
- * @param ctor The form submitter element's constructor.
- */
-export function setupFormSubmitter(ctor: FormSubmitterConstructor) {
-  if (isServer) {
-    return;
-  }
-
-  (ctor as unknown as typeof ReactiveElement).addInitializer((instance) => {
-    const submitter = instance as FormSubmitter;
-    submitter.addEventListener('click', async (event) => {
-      const {type, [internals]: elementInternals} = submitter;
-      const {form} = elementInternals;
-      if (!form || type === 'button') {
-        return;
-      }
-
-      // Wait a full task for event bubbling to complete.
-      await new Promise<void>((resolve) => {
-        setTimeout(resolve);
-      });
-
-      if (event.defaultPrevented) {
-        return;
-      }
-
-      if (type === 'reset') {
-        form.reset();
-        return;
-      }
-
-      // form.requestSubmit(submitter) does not work with form associated custom
-      // elements. This patches the dispatched submit event to add the correct
-      // `submitter`.
-      // See https://github.com/WICG/webcomponents/issues/814
-      form.addEventListener(
-        'submit',
-        (submitEvent) => {
-          Object.defineProperty(submitEvent, 'submitter', {
-            configurable: true,
-            enumerable: true,
-            get: () => submitter,
-          });
-        },
-        {capture: true, once: true},
-      );
-
-      elementInternals.setFormValue(submitter.value);
-      form.requestSubmit();
-    });
-  });
-}
diff --git a/labs/behaviors/form-submitter.ts b/labs/behaviors/form-submitter.ts
new file mode 100644
index 0000000000..c0c5abaec7
--- /dev/null
+++ b/labs/behaviors/form-submitter.ts
@@ -0,0 +1,140 @@
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import {isServer, LitElement} from 'lit';
+import {property} from 'lit/decorators.js';
+
+import {
+  afterDispatch,
+  setupDispatchHooks,
+} from '../../internal/events/dispatch-hooks.js';
+import {internals, WithElementInternals} from './element-internals.js';
+import {MixinBase, MixinReturn} from './mixin.js';
+
+/**
+ * A string indicating the form submission behavior of the element.
+ *
+ * - submit: The element submits the form. This is the default value if the
+ * attribute is not specified, or if it is dynamically changed to an empty or
+ * invalid value.
+ * - reset: The element resets the form.
+ * - button: The element does nothing.
+ */
+export type FormSubmitterType = 'button' | 'submit' | 'reset';
+
+/**
+ * An element that can submit or reset a `<form>`, similar to
+ * `<button type="submit">`.
+ */
+export interface FormSubmitter {
+  /**
+   * A string indicating the form submission behavior of the element.
+   *
+   * - submit: The element submits the form. This is the default value if the
+   * attribute is not specified, or if it is dynamically changed to an empty or
+   * invalid value.
+   * - reset: The element resets the form.
+   * - button: The element does nothing.
+   */
+  type: FormSubmitterType;
+
+  /**
+   * The HTML name to use in form submission. When combined with a `value`, the
+   * submitting button's name/value will be added to the form.
+   *
+   * Names must reflect to a `name` attribute for form integration.
+   */
+  name: string;
+
+  /**
+   * The value of the button. When combined with a `name`, the submitting
+   * button's name/value will be added to the form.
+   */
+  value: string;
+}
+
+/**
+ * Mixes in form submitter behavior for a class.
+ *
+ * A click listener is added to each element instance. If the click is not
+ * default prevented, it will submit the element's form, if any.
+ *
+ * @example
+ * ```ts
+ * const base = mixinFormSubmitter(mixinElementInternals(LitElement));
+ * class MyButton extends base {
+ *   static formAssociated = true;
+ * }
+ * ```
+ *
+ * @param base The class to mix functionality into.
+ * @return The provided class with `FormSubmitter` mixed in.
+ */
+export function mixinFormSubmitter<
+  T extends MixinBase<LitElement & WithElementInternals>,
+>(base: T): MixinReturn<T, FormSubmitter> {
+  abstract class FormSubmitterElement extends base implements FormSubmitter {
+    @property() type: FormSubmitterType = 'submit';
+    @property({reflect: true}) value = '';
+
+    // Name attribute must reflect synchronously for form integration.
+    get name() {
+      return this.getAttribute('name') ?? '';
+    }
+    set name(name: string) {
+      this.setAttribute('name', name);
+    }
+
+    // Mixins must have a constructor with `...args: any[]`
+    // tslint:disable-next-line:no-any
+    constructor(...args: any[]) {
+      super(...args);
+      if (isServer) return;
+      setupDispatchHooks(this, 'click');
+      this.addEventListener('click', async (event: Event) => {
+        const isReset = this.type === 'reset';
+        const isSubmit = this.type === 'submit';
+        const elementInternals = this[internals];
+        const {form} = elementInternals;
+        if (!form || !(isSubmit || isReset)) {
+          return;
+        }
+
+        afterDispatch(event, () => {
+          if (event.defaultPrevented) {
+            return;
+          }
+
+          if (isReset) {
+            form.reset();
+            return;
+          }
+
+          // form.requestSubmit(submitter) does not work with form associated custom
+          // elements. This patches the dispatched submit event to add the correct
+          // `submitter`.
+          // See https://github.com/WICG/webcomponents/issues/814
+          form.addEventListener(
+            'submit',
+            (submitEvent: Event) => {
+              Object.defineProperty(submitEvent, 'submitter', {
+                configurable: true,
+                enumerable: true,
+                get: () => this,
+              });
+            },
+            {capture: true, once: true},
+          );
+
+          elementInternals.setFormValue(this.value);
+          form.requestSubmit();
+        });
+      });
+    }
+  }
+
+  return FormSubmitterElement;
+}
diff --git a/internal/controller/form-submitter_test.ts b/labs/behaviors/form-submitter_test.ts
similarity index 91%
rename from internal/controller/form-submitter_test.ts
rename to labs/behaviors/form-submitter_test.ts
index 3679a4b0d1..8544f9dd1e 100644
--- a/internal/controller/form-submitter_test.ts
+++ b/labs/behaviors/form-submitter_test.ts
@@ -7,12 +7,12 @@
 // import 'jasmine'; (google3-only)
 
 import {html, LitElement} from 'lit';
-import {customElement, property} from 'lit/decorators.js';
+import {customElement} from 'lit/decorators.js';
 
 import {mixinElementInternals} from '../../labs/behaviors/element-internals.js';
 import {Environment} from '../../testing/environment.js';
 import {Harness} from '../../testing/harness.js';
-import {FormSubmitterType, setupFormSubmitter} from './form-submitter.js';
+import {mixinFormSubmitter} from './form-submitter.js';
 
 declare global {
   interface HTMLElementTagNameMap {
@@ -21,16 +21,10 @@ declare global {
 }
 
 @customElement('test-form-submitter-button')
-class FormSubmitterButton extends mixinElementInternals(LitElement) {
-  static {
-    setupFormSubmitter(FormSubmitterButton);
-  }
-
+class FormSubmitterButton extends mixinFormSubmitter(
+  mixinElementInternals(LitElement),
+) {
   static formAssociated = true;
-
-  type: FormSubmitterType = 'submit';
-  @property({reflect: true}) name = '';
-  value = '';
 }
 
 describe('setupFormSubmitter()', () => {