fix(fab-button): type="submit" and type="reset" now work inside forms - #31249
Open
LucasArray wants to merge 3 commits into
Open
fix(fab-button): type="submit" and type="reset" now work inside forms#31249LucasArray wants to merge 3 commits into
LucasArray wants to merge 3 commits into
Conversation
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 is attempting to deploy a commit to the Ionic Team on Vercel. A member of the Team first needs to authorize it. |
github-actions
Bot
added
package: angular
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Member
|
Hey @LucasArray! Thanks for the PR. Sorry it's been sitting so long! I pushed some changes to your PR, one just updates from main, the other fixes a few issues. The hidden button wasn't syncing We'll try to get this reviewed and merged shortly. Thank you for your patience! |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Fixes #18550 —
ion-fab-buttonwithtype="submit"does not submit its parent form.Root cause:
ion-fab-buttonuses 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'ssubmitevent.Fix: Port the hidden-button pattern already used by
ion-button:type !== 'button'), inject a hidden<button>into the associated form in the light DOM.ev.preventDefault()to stop the shadow button from acting, then.click()the hidden button — which is a proper form participant and triggers submission.formprop (string | HTMLFormElement) so the button can target a form outside its DOM subtree (same API asion-button).disabledwatcher in sync with the hidden button so a disabled fab-button cannot submit.Changes
core/src/components/fab-button/fab-button.tsx— core fixcore/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-renderscore/src/components/fab-button/test/form/index.html— visual test pageTest plan
npm run test.specpasses (unit test for hidden-button dedup)npm run test.e2epasses forfab-button/test/form/fab-button.e2e.tsion-fab-button type="submit"inside a<form>submits on clickion-fab-button type="reset"resets form fieldsform="id"targets an external form