Skip to content

fix(fab-button): type="submit" and type="reset" now work inside forms#31249

Open
LucasArray wants to merge 1 commit into
ionic-team:mainfrom
LucasArray:fix/fab-button-form-submit
Open

fix(fab-button): type="submit" and type="reset" now work inside forms#31249
LucasArray wants to merge 1 commit into
ionic-team:mainfrom
LucasArray:fix/fab-button-form-submit

Conversation

@LucasArray

Copy link
Copy Markdown

Summary

Fixes #18550ion-fab-button with type="submit" does not submit its parent form.

Root cause: ion-fab-button uses Shadow DOM, so its internal <button> element is not part of the form-associated elements in the light DOM. Clicking it (or pressing Enter in a text field) never triggers the form's submit event.

Fix: Port the hidden-button pattern already used by ion-button:

  • On render (when type !== 'button'), inject a hidden <button> into the associated form in the light DOM.
  • On click, call ev.preventDefault() to stop the shadow button from acting, then .click() the hidden button — which is a proper form participant and triggers submission.
  • Add a form prop (string | HTMLFormElement) so the button can target a form outside its DOM subtree (same API as ion-button).
  • Keep the disabled watcher in sync with the hidden button so a disabled fab-button cannot submit.

Changes

  • core/src/components/fab-button/fab-button.tsx — core fix
  • core/src/components/fab-button/test/form/fab-button.e2e.ts — Playwright e2e tests (closest form, form by id, form by reference, Enter key, disabled, reset)
  • core/src/components/fab-button/test/form/fab-button.spec.ts — unit test asserting the hidden button is not duplicated on re-renders
  • core/src/components/fab-button/test/form/index.html — visual test page

Test plan

  • npm run test.spec passes (unit test for hidden-button dedup)
  • npm run test.e2e passes for fab-button/test/form/fab-button.e2e.ts
  • Manual: ion-fab-button type="submit" inside a <form> submits on click
  • Manual: pressing Enter in a form input triggers submit
  • Manual: ion-fab-button type="reset" resets form fields
  • Manual: disabled fab-button does not submit
  • Manual: form="id" targets an external form

Shadow DOM prevents ion-fab-button's native button from participating
in form submission. Port the hidden-button pattern from ion-button:
inject a hidden <button> into the associated form (found via the new
`form` prop or by walking up to the closest <form> ancestor), then
click it on Host click to trigger native form submission and Enter-key
support.

Fixes ionic-team#18550
@LucasArray LucasArray requested a review from a team as a code owner June 26, 2026 19:06
@LucasArray LucasArray requested a review from ShaneK June 26, 2026 19:06
@vercel

vercel Bot commented Jun 26, 2026

Copy link
Copy Markdown

@LucasArray is attempting to deploy a commit to the Ionic Team on Vercel.

A member of the Team first needs to authorize it.

@github-actions github-actions Bot added the package: core @ionic/core package label Jun 26, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

package: core @ionic/core package

Projects

None yet

Development

Successfully merging this pull request may close these issues.

bug: fab-button with type "submit" does not submit the form

1 participant