-
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(overlays): do not overwrite id set in htmlAttributes (#29722)
Issue number: resolves #29712 --------- <!-- 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? In every type of overlay, the auto incremented overlay id is overwriting any id set in htmlAttributes. ## What is the new behavior? The id in htmlAttributes now takes precedence. ## Does this introduce a breaking change? - [ ] Yes - [x] No <!-- If this introduces a breaking change: 1. Describe the impact and migration path for existing applications below. 2. Update the BREAKING.md file with the breaking change. 3. Add "BREAKING CHANGE: [...]" to the commit description when merging. See https://github.com/ionic-team/ionic-framework/blob/main/docs/CONTRIBUTING.md#footer for more information. --> ## Other information <!-- Any other information that is important to this PR such as screenshots of how the component looks before and after the change. --> --------- Co-authored-by: Sean Perkins <13732623+sean-perkins@users.noreply.github.com>
- Loading branch information
1 parent
05913c3
commit 92ce563
Showing
21 changed files
with
401 additions
and
305 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
41 changes: 0 additions & 41 deletions
41
core/src/components/action-sheet/test/action-sheet-id.spec.ts
This file was deleted.
Oops, something went wrong.
55 changes: 55 additions & 0 deletions
55
core/src/components/action-sheet/test/action-sheet-id.spec.tsx
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,55 @@ | ||
import { newSpecPage } from '@stencil/core/testing'; | ||
|
||
import { ActionSheet } from '../action-sheet'; | ||
import { h } from '@stencil/core'; | ||
|
||
describe('action-sheet: id', () => { | ||
it('action sheet should be assigned an incrementing id', async () => { | ||
const page = await newSpecPage({ | ||
components: [ActionSheet], | ||
html: `<ion-action-sheet is-open="true"></ion-action-sheet>`, | ||
}); | ||
let actionSheet: HTMLIonActionSheetElement; | ||
|
||
actionSheet = page.body.querySelector('ion-action-sheet')!; | ||
|
||
expect(actionSheet).not.toBe(null); | ||
expect(actionSheet.getAttribute('id')).toBe('ion-overlay-1'); | ||
|
||
// Remove the action sheet from the DOM | ||
actionSheet.remove(); | ||
await page.waitForChanges(); | ||
|
||
// Create a new action sheet to verify the id is incremented | ||
actionSheet = document.createElement('ion-action-sheet'); | ||
actionSheet.isOpen = true; | ||
page.body.appendChild(actionSheet); | ||
await page.waitForChanges(); | ||
|
||
actionSheet = page.body.querySelector('ion-action-sheet')!; | ||
|
||
expect(actionSheet.getAttribute('id')).toBe('ion-overlay-2'); | ||
|
||
// Presenting the same action sheet again should reuse the existing id | ||
|
||
actionSheet.isOpen = false; | ||
await page.waitForChanges(); | ||
actionSheet.isOpen = true; | ||
await page.waitForChanges(); | ||
|
||
actionSheet = page.body.querySelector('ion-action-sheet')!; | ||
|
||
expect(actionSheet.getAttribute('id')).toBe('ion-overlay-2'); | ||
}); | ||
|
||
it('should not overwrite the id set in htmlAttributes', async () => { | ||
const id = 'custom-id'; | ||
const page = await newSpecPage({ | ||
components: [ActionSheet], | ||
template: () => <ion-action-sheet htmlAttributes={{ id }} overlayIndex={-1}></ion-action-sheet>, | ||
}); | ||
|
||
const alert = page.body.querySelector('ion-action-sheet')!; | ||
expect(alert.id).toBe(id); | ||
}); | ||
}); |
This file was deleted.
Oops, something went wrong.
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,55 @@ | ||
import { newSpecPage } from '@stencil/core/testing'; | ||
|
||
import { Alert } from '../alert'; | ||
import { h } from '@stencil/core'; | ||
|
||
describe('alert: id', () => { | ||
it('alert should be assigned an incrementing id', async () => { | ||
const page = await newSpecPage({ | ||
components: [Alert], | ||
html: `<ion-alert is-open="true"></ion-alert>`, | ||
}); | ||
let alert: HTMLIonAlertElement; | ||
|
||
alert = page.body.querySelector('ion-alert')!; | ||
|
||
expect(alert).not.toBe(null); | ||
expect(alert.getAttribute('id')).toBe('ion-overlay-1'); | ||
|
||
// Remove the alert from the DOM | ||
alert.remove(); | ||
await page.waitForChanges(); | ||
|
||
// Create a new alert to verify the id is incremented | ||
alert = document.createElement('ion-alert'); | ||
alert.isOpen = true; | ||
page.body.appendChild(alert); | ||
await page.waitForChanges(); | ||
|
||
alert = page.body.querySelector('ion-alert')!; | ||
|
||
expect(alert.getAttribute('id')).toBe('ion-overlay-2'); | ||
|
||
// Presenting the same alert again should reuse the existing id | ||
|
||
alert.isOpen = false; | ||
await page.waitForChanges(); | ||
alert.isOpen = true; | ||
await page.waitForChanges(); | ||
|
||
alert = page.body.querySelector('ion-alert')!; | ||
|
||
expect(alert.getAttribute('id')).toBe('ion-overlay-2'); | ||
}); | ||
|
||
it('should not overwrite the id set in htmlAttributes', async () => { | ||
const id = 'custom-id'; | ||
const page = await newSpecPage({ | ||
components: [Alert], | ||
template: () => <ion-alert htmlAttributes={{ id }} overlayIndex={-1}></ion-alert>, | ||
}); | ||
|
||
const alert = page.body.querySelector('ion-alert')!; | ||
expect(alert.id).toBe(id); | ||
}); | ||
}); |
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
This file was deleted.
Oops, something went wrong.
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,55 @@ | ||
import { newSpecPage } from '@stencil/core/testing'; | ||
|
||
import { Loading } from '../loading'; | ||
import { h } from '@stencil/core'; | ||
|
||
describe('loading: id', () => { | ||
it('loading should be assigned an incrementing id', async () => { | ||
const page = await newSpecPage({ | ||
components: [Loading], | ||
html: `<ion-loading is-open="true"></ion-loading>`, | ||
}); | ||
let loading: HTMLIonLoadingElement; | ||
|
||
loading = page.body.querySelector('ion-loading')!; | ||
|
||
expect(loading).not.toBe(null); | ||
expect(loading.getAttribute('id')).toBe('ion-overlay-1'); | ||
|
||
// Remove the loading from the DOM | ||
loading.remove(); | ||
await page.waitForChanges(); | ||
|
||
// Create a new loading to verify the id is incremented | ||
loading = document.createElement('ion-loading'); | ||
loading.isOpen = true; | ||
page.body.appendChild(loading); | ||
await page.waitForChanges(); | ||
|
||
loading = page.body.querySelector('ion-loading')!; | ||
|
||
expect(loading.getAttribute('id')).toBe('ion-overlay-2'); | ||
|
||
// Presenting the same loading again should reuse the existing id | ||
|
||
loading.isOpen = false; | ||
await page.waitForChanges(); | ||
loading.isOpen = true; | ||
await page.waitForChanges(); | ||
|
||
loading = page.body.querySelector('ion-loading')!; | ||
|
||
expect(loading.getAttribute('id')).toBe('ion-overlay-2'); | ||
}); | ||
|
||
it('should not overwrite the id set in htmlAttributes', async () => { | ||
const id = 'custom-id'; | ||
const page = await newSpecPage({ | ||
components: [Loading], | ||
template: () => <ion-loading htmlAttributes={{ id }} overlayIndex={-1}></ion-loading>, | ||
}); | ||
|
||
const alert = page.body.querySelector('ion-loading')!; | ||
expect(alert.id).toBe(id); | ||
}); | ||
}); |
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 was deleted.
Oops, something went wrong.
Oops, something went wrong.