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>

core/src/components/toast/test/toast-id.spec.ts

@@ -1,41 +0,0 @@
-import { newSpecPage } from '@stencil/core/testing';
-
-import { Toast } from '../toast';
-
-it('toast should be assigned an incrementing id', async () => {
-  const page = await newSpecPage({
-    components: [Toast],
-    html: `<ion-toast is-open="true"></ion-toast>`,
-  });
-  let toast: HTMLIonToastElement;
-
-  toast = page.body.querySelector('ion-toast')!;
-
-  expect(toast).not.toBe(null);
-  expect(toast.getAttribute('id')).toBe('ion-overlay-1');
-
-  // Remove the toast from the DOM
-  toast.remove();
-  await page.waitForChanges();
-
-  // Create a new toast to verify the id is incremented
-  toast = document.createElement('ion-toast');
-  toast.isOpen = true;
-  page.body.appendChild(toast);
-  await page.waitForChanges();
-
-  toast = page.body.querySelector('ion-toast')!;
-
-  expect(toast.getAttribute('id')).toBe('ion-overlay-2');
-
-  // Presenting the same toast again should reuse the existing id
-
-  toast.isOpen = false;
-  await page.waitForChanges();
-  toast.isOpen = true;
-  await page.waitForChanges();
-
-  toast = page.body.querySelector('ion-toast')!;
-
-  expect(toast.getAttribute('id')).toBe('ion-overlay-2');
-});

core/src/components/toast/test/toast-id.spec.tsx

@@ -0,0 +1,55 @@
+import { newSpecPage } from '@stencil/core/testing';
+
+import { Toast } from '../toast';
+import { h } from '@stencil/core';
+
+describe('toast: id', () => {
+  it('toast should be assigned an incrementing id', async () => {
+    const page = await newSpecPage({
+      components: [Toast],
+      html: `<ion-toast is-open="true"></ion-toast>`,
+    });
+    let toast: HTMLIonToastElement;
+
+    toast = page.body.querySelector('ion-toast')!;
+
+    expect(toast).not.toBe(null);
+    expect(toast.getAttribute('id')).toBe('ion-overlay-1');
+
+    // Remove the toast from the DOM
+    toast.remove();
+    await page.waitForChanges();
+
+    // Create a new toast to verify the id is incremented
+    toast = document.createElement('ion-toast');
+    toast.isOpen = true;
+    page.body.appendChild(toast);
+    await page.waitForChanges();
+
+    toast = page.body.querySelector('ion-toast')!;
+
+    expect(toast.getAttribute('id')).toBe('ion-overlay-2');
+
+    // Presenting the same toast again should reuse the existing id
+
+    toast.isOpen = false;
+    await page.waitForChanges();
+    toast.isOpen = true;
+    await page.waitForChanges();
+
+    toast = page.body.querySelector('ion-toast')!;
+
+    expect(toast.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: [Toast],
+      template: () => <ion-toast htmlAttributes={{ id }} overlayIndex={-1}></ion-toast>,
+    });
+
+    const alert = page.body.querySelector('ion-toast')!;
+    expect(alert.id).toBe(id);
+  });
+});

core/src/components/toast/toast.tsx

@@ -321,7 +321,9 @@ export class Toast implements ComponentInterface, OverlayInterface {
   }
 
   componentWillLoad() {
-    setOverlayId(this.el);
+    if (!this.htmlAttributes?.id) {
+      setOverlayId(this.el);
+    }
   }
 
   componentDidLoad() {