-
Notifications
You must be signed in to change notification settings - Fork 13.5k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
bug: Alerts override id assigned through htmlAttributes #29704
bug: Alerts override id assigned through htmlAttributes #29704
Comments
@mikelhamer can you make the repository public so the Ionic team can review it? Thanks! |
Oops! Done |
@mikelhamer awesome, thanks! This behavior changed in this PR from me 😅 This is a bug. Ionic Framework's overlays need to be updated to additionally account for the As a workaround you can manually assigning the attribute after the overlay is presented: await alert.present();
await alert.setAttribute('id', 'custom-id'); |
@sean-perkins woohoo! Thanks for confirming, and for the workaround! I wouldn't mind trying to take this on as a first contribution, but could use some insights into the impact of that PR and what to consider when applying a fix. |
@mikelhamer awesome! I believe the fix is straightforward, we need to opt-out of calling For example, something similar to: componentWillLoad() {
if (!this.htmlAttributes?.id) {
setOverlayId(this.el);
}
} This should prevent Ionic from overriding the Ionic's tests can feel intimidating, but I promise they aren't too bad to get started with 👍 The documentation for how testing works in Ionic Framework is available here: https://github.com/ionic-team/ionic-framework/tree/main/docs/core/testing. You may be able to write a simple Stencil spec test instead of relying on something heavier like the Playwright e2e tests. An example of a Stencil spec test is here: https://github.com/ionic-team/ionic-framework/blob/main/core/src/components/alert/test/alert.spec.ts The test case should be:
Let me know if you run into any challenges or have questions! |
@sean-perkins many thanks! I will dive in |
@sean-perkins hmmmm, I am a bit lost. I've created this test which I thought should fail, but it's passing before making any changes to it('should be assigned id from html attributes', async () => {
// Given: An alert with an id specified in html attributes
const page = await newSpecPage({
components: [Alert],
html: `<ion-alert is-open="true"></ion-alert>`
});
let alert: HTMLIonAlertElement = page.root as HTMLIonAlertElement;
const htmlAttributes = {id: 'custom-id'};
alert.htmlAttributes = htmlAttributes;
await page.waitForChanges();
// When: The alert is queried from the page
alert = page.body.querySelector('ion-alert')!;
// Then: The id should be set to the id specified in html attributes
expect(alert).not.toBe(null);
expect(alert.getAttribute('id')).toBe(htmlAttributes.id);
});
}); |
@mikelhamer I would recommend renaming the For example: // src/components/alert/test/alert.spec.tsx
import { h } from '@stencil/core';
import { newSpecPage } from '@stencil/core/testing';
import { config } from '../../../global/config';
import { Alert } from '../alert';
describe('alert: custom html', () => {
it('does not overwrite the id set in the htmlAttributes', async () => {
const page = await newSpecPage({
components: [Alert],
template: () => <ion-alert htmlAttributes={{ id: 'my-custom-id' }} overlayIndex={-1}></ion-alert>,
});
const alert = page.body.querySelector('ion-alert')!;
expect(alert.id).toBe('my-custom-id');
});
/* existing tests */
}); With it, I was able to confirm the test fails on componentWillLoad() {
+ if (!this.htmlAttributes?.id) {
setOverlayId(this.el);
+ }
this.inputsChanged();
this.buttonsChanged();
} |
@sean-perkins thanks for the help! PR opened. |
Issue number: resolves #29704 --------- <!-- 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? Setting the id of an alert via htmlAttributes doesn't work due to it being overwritten by the overlay id. ## What is the new behavior? Setting the id of an alert via htmlAttributes works. ## 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 First time PR, long time fan. Please let me know if I missed any of the contributing guidelines, happy to change anything!
Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out. |
Prerequisites
Ionic Framework Version
v8.x
Current Behavior
After upgrading from version 7 to 8, the ion-alerts created via the AlertController no longer have the custom ID attribute I set via the htmlAttributes property like so
Instead, it has an id of
ion-overlay-1
.Expected Behavior
The ion-alert should have the custom ID
Steps to Reproduce
Code Reproduction URL
https://github.com/mikelhamer/ion8-alert-bug
Ionic Info
Additional Information
No response
The text was updated successfully, but these errors were encountered: