-
Notifications
You must be signed in to change notification settings - Fork 13.5k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
fix(button): hidden button is added when form is set async (#27955)
Issue number: resolves #27952 --------- <!-- 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. --> The hidden button in `ion-button` that is responsible for submitting the form does not get added when the `form` property is set async. ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> - `ion-button` now checks to see if it needs to render a hidden button whenever it re-renders. This allows it to account for changes to the `type` property, `form` property, etc. Since this code can potentially run multiple times I added an extra check so we don't add multiple buttons to the form. ## Does this introduce a breaking change? - [ ] Yes - [x] No <!-- If this introduces a breaking change, please describe the impact and migration path for existing applications below. --> ## Other information <!-- Any other information that is important to this PR such as screenshots of how the component looks before and after the change. --> Dev build: `7.2.3-dev.11691523847.1760ab58`
- Loading branch information
1 parent
07dee74
commit e9fa300
Showing
3 changed files
with
79 additions
and
12 deletions.
There are no files selected for viewing
This file contains 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
This file contains 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
31 changes: 31 additions & 0 deletions
31
core/src/components/button/test/form-reference/button.spec.ts
This file contains 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
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,31 @@ | ||
import { newSpecPage } from '@stencil/core/testing'; | ||
import { Button } from '../../button'; | ||
|
||
describe('Button: Hidden Form Button', () => { | ||
it('should not add multiple buttons to the form', async () => { | ||
const page = await newSpecPage({ | ||
components: [Button], | ||
html: ` | ||
<form id="my-form"></form> | ||
<ion-button form="my-form" type="submit">Submit</ion-button> | ||
`, | ||
}); | ||
|
||
const getButtons = () => { | ||
return page.body.querySelectorAll('form button'); | ||
}; | ||
|
||
const form = page.body.querySelectorAll('form'); | ||
const button = page.body.querySelector('ion-button'); | ||
|
||
await page.waitForChanges(); | ||
|
||
expect(getButtons().length).toEqual(1); | ||
|
||
// Re-render the component | ||
button.color = 'danger'; | ||
await page.waitForChanges(); | ||
|
||
expect(getButtons().length).toEqual(1); | ||
}); | ||
}); |