mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-11-10 00:27:41 +08:00
fix(segment-button): update checked state on render (#26970)
<!-- Please refer to our contributing documentation for any questions on submitting a pull request, or let us know here if you need any help: https://ionicframework.com/docs/building/contributing --> ## Pull request checklist Please check if your PR fulfills the following requirements: - [ ] Tests for the changes have been added (for bug fixes / features) - [ ] Docs have been reviewed and added / updated if needed (for bug fixes / features) - Some docs updates need to be made in the `ionic-docs` repo, in a separate PR. See the [contributing guide](https://github.com/ionic-team/ionic-framework/blob/main/.github/CONTRIBUTING.md#modifying-documentation) for details. - [x] Build (`npm run build`) was run locally and any changes were pushed - [x] Lint (`npm run lint`) has passed locally and any fixes were made for failures ## Pull request type <!-- Please do not submit updates to dependencies unless it fixes an issue. --> <!-- Please try to limit your pull request to one type, submit multiple pull requests if needed. --> Please check the type of change your PR introduces: - [x] Bugfix - [ ] Feature - [ ] Code style update (formatting, renaming) - [ ] Refactoring (no functional changes, no api changes) - [ ] Build related changes - [ ] Documentation content changes - [ ] Other (please describe): ## What is the current behavior? <!-- Please describe the current behavior that you are modifying. --> In v7, asynchronously assigning a value to `ion-segment` and `ion-segment-button` can cause the `ion-segment` to render without an active value (segment button does not show as checked). <!-- Issues are required for both bug fixes and features. --> Issue URL: resolves #26830 ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> - The `ion-segment-button` checked state is synced with the parent `ion-segment`, when the component finishes the initial render. ## 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.0.0-dev.11678736268.18a0beb1` ✅ --------- Co-authored-by: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
This commit is contained in:
@ -16,3 +16,23 @@ it('should disable segment buttons added to disabled segment async', async () =>
|
||||
const segmentButton = page.body.querySelector('ion-segment-button');
|
||||
expect(segmentButton.disabled).toBe(true);
|
||||
});
|
||||
|
||||
it('should set checked state when value is set asynchronously', async () => {
|
||||
const page = await newSpecPage({
|
||||
components: [Segment, SegmentButton],
|
||||
html: `
|
||||
<ion-segment value="first">
|
||||
<ion-segment-button>First</ion-segment-button>
|
||||
</ion-segment>
|
||||
`,
|
||||
});
|
||||
|
||||
const segmentButton = page.root.querySelector('ion-segment-button');
|
||||
|
||||
expect(segmentButton.classList.contains('segment-button-checked')).toBe(false);
|
||||
|
||||
segmentButton.value = 'first';
|
||||
await page.waitForChanges();
|
||||
|
||||
expect(segmentButton.classList.contains('segment-button-checked')).toBe(true);
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user