diff --git a/core/src/components/button/button.tsx b/core/src/components/button/button.tsx index 0e4741f4acd..a1e7f72bf01 100644 --- a/core/src/components/button/button.tsx +++ b/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; } diff --git a/core/src/components/button/test/form-reference/button.e2e.ts b/core/src/components/button/test/form-reference/button.e2e.ts index 5710f52da67..c85cd20760d 100644 --- a/core/src/components/button/test/form-reference/button.e2e.ts +++ b/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( + ` +
+ + Submit + + `, + 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'), () => {