fix(button): sync disabled state and type in renderHiddenButton (#31225)

Issue number: resolves #30968

---------

<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->

<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->

## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->
`<ion-button>` with type="submit" does not cause the associated `<form>`
to be submitted even though it is not disabled. When the text of the
input field is cleared and then input re-added, you can submit the
input.

## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
The visible and hidden button should always have the same disabled
state. `<ion-button>` with type="submit" should always submit the
associated `<form>` when it is enabled.

- Add `formButtonEl.disabled = this.disabled;` and `formButtonEl.type =
this.type;` to button.tsx in `renderHiddenButton()`. This addition syncs
the disabled status and type of the button when that happens.
- Add a test in to to
`packages/angular/test/base/e2e/src/lazy/form.spec.ts` which should
ensure any changes in button type are synced. The test gets the hidden
button type, changes the visible button state, and then expects the
hidden button state to change as well.
- Per conversations around this PR, testing disabled state sync will
need a dev build due to the nature of the issue.
## Does this introduce a breaking change?

- [ ] Yes
- [x] No

<!--
  If this introduces a breaking change:
1. Describe the impact and migration path for existing applications
below.
  2. Update the BREAKING.md file with the breaking change.
3. Add "BREAKING CHANGE: [...]" to the commit description when merging.
See
https://github.com/ionic-team/ionic-framework/blob/main/docs/CONTRIBUTING.md#footer
for more information.
-->


## Other information

<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->
Related to a stencil update that affected when @watch('disabled') fires.

---------

Co-authored-by: Shane <shane@shanessite.net>

Author: Zac-Smucker-Bryan

core/src/components/button/button.tsx

@@ -195,9 +195,13 @@ export class Button implements ComponentInterface, AnchorInterface, ButtonInterf
 
       /**
        * If the form already has a rendered form button
-       * then do not append a new one again.
+       * then do not append a new one again. Sync the
+       * disabled state and type if it changes after button
+       * creation (e.g., runtime property updates).
        */
       if (formButtonEl !== null && formEl.contains(formButtonEl)) {
+        formButtonEl.disabled = this.disabled;
+        formButtonEl.type = this.type;
         return;
       }
 

core/src/components/button/test/form-reference/button.e2e.ts

@@ -153,6 +153,41 @@ configs({ directions: ['ltr'], modes: ['ios'] }).forEach(({ title, config }) =>
 
       expect(submitEvent).toHaveReceivedEvent();
     });
+
+    test('should keep hidden button type in sync with visible button', async ({ page }) => {
+      // Set the form to have a submit button
+      await page.setContent(
+        `
+        <form id="myForm"></form>
+        <ion-button form="myForm" type="submit">
+          Submit
+        </ion-button>
+      `,
+        config
+      );
+
+      // Get visible button
+      const button = page.locator('ion-button');
+
+      // Get type of the hidden button
+      const getHiddenType = () =>
+        page.evaluate(() => {
+          const hidden = document.querySelector('form button[style*="display: none"]') as HTMLButtonElement;
+
+          return hidden?.type;
+        });
+
+      // Type of hidden button should be submit to start
+      expect(await getHiddenType()).toBe('submit');
+
+      // Set type of visible button to reset
+      await button.evaluate((el: HTMLIonButtonElement) => {
+        el.type = 'reset';
+      });
+
+      // Expect hidden button type to be reset
+      await expect.poll(async () => await getHiddenType()).toBe('reset');
+    });
   });
 
   test.describe(title('should throw a warning if the form cannot be found'), () => {