Skip to content

Commit

Permalink
fix(overlays): do not overwrite id set in htmlAttributes (#29722)
Browse files Browse the repository at this point in the history
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
mikelhamer and sean-perkins authored Jul 24, 2024
1 parent 05913c3 commit 92ce563
Show file tree
Hide file tree
Showing 21 changed files with 401 additions and 305 deletions.
4 changes: 3 additions & 1 deletion core/src/components/action-sheet/action-sheet.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -310,7 +310,9 @@ export class ActionSheet implements ComponentInterface, OverlayInterface {
}

componentWillLoad() {
setOverlayId(this.el);
if (!this.htmlAttributes?.id) {
setOverlayId(this.el);
}
}

componentDidLoad() {
Expand Down
41 changes: 0 additions & 41 deletions core/src/components/action-sheet/test/action-sheet-id.spec.ts

This file was deleted.

55 changes: 55 additions & 0 deletions core/src/components/action-sheet/test/action-sheet-id.spec.tsx
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);
});
});
41 changes: 0 additions & 41 deletions core/src/components/alert/test/alert-id.spec.ts

This file was deleted.

55 changes: 55 additions & 0 deletions core/src/components/alert/test/alert-id.spec.tsx
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);
});
});
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,6 @@ import { newSpecPage } from '@stencil/core/testing';

import { config } from '../../../global/config';
import { Alert } from '../alert';
import { h } from '@stencil/core';

describe('alert: custom html', () => {
it('should not allow for custom html by default', async () => {
Expand Down Expand Up @@ -39,15 +38,4 @@ describe('alert: custom html', () => {
expect(content.textContent).toContain('Custom Text');
expect(content.querySelector('button.custom-html')).toBe(null);
});

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);
});
});
4 changes: 3 additions & 1 deletion core/src/components/loading/loading.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -214,7 +214,9 @@ export class Loading implements ComponentInterface, OverlayInterface {
const mode = getIonMode(this);
this.spinner = config.get('loadingSpinner', config.get('spinner', mode === 'ios' ? 'lines' : 'crescent'));
}
setOverlayId(this.el);
if (!this.htmlAttributes?.id) {
setOverlayId(this.el);
}
}

componentDidLoad() {
Expand Down
41 changes: 0 additions & 41 deletions core/src/components/loading/test/loading-id.spec.ts

This file was deleted.

55 changes: 55 additions & 0 deletions core/src/components/loading/test/loading-id.spec.tsx
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);
});
});
4 changes: 3 additions & 1 deletion core/src/components/modal/modal.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -415,7 +415,9 @@ export class Modal implements ComponentInterface, OverlayInterface {
printIonWarning('Your breakpoints array must include the initialBreakpoint value.');
}

setOverlayId(el);
if (!this.htmlAttributes?.id) {
setOverlayId(this.el);
}
}

componentDidLoad() {
Expand Down
41 changes: 0 additions & 41 deletions core/src/components/modal/test/modal-id.spec.ts

This file was deleted.

Loading

0 comments on commit 92ce563

Please sign in to comment.