bug: <ion-datetime-button> not rendered inside modal

[DwieDima]

Prerequisites

• [x] I have read the Contributing Guidelines.
• [x] I agree to follow the Code of Conduct.
• [x] I have searched for existing issues that already report this problem, without success.

Ionic Framework Version

v8.x

Current Behavior

When using <ion-datetime-button> inside a modal page (created via ModalController), the component does not render anything unless the linked <ion-datetime> and <ion-datetime-button> (e.g. with ID calendar-trigger) is already present in the DOM before the button is initialized.

This seems related to Web Component hydration timing in dynamically loaded views.

However, if a <ion-datetime> with the same ID is rendered earlier (inside a routed page) (even with display: none), the button suddenly works inside the modal, but is rendered from parent page without the possibility to use value binding from modal.

Expected Behavior

<ion-datetime-button> should correctly render and bind to its matching target, regardless of where in the component it appears, as long as the referenced element exists in the DOM at the time of rendering.

Hydration/timing should not cause the component to silently fail.

Steps to Reproduce

1. open stackblitz
2. click on "open" button
3. modal is visible without the ion-datetime-button visible
4. comment in the html inside example.component.html
5. safe changes
6. click on "open" button
7. modal is visible with ion-datetime-button displaying the date

Code Reproduction URL

https://stackblitz.com/edit/vnczfh3u?file=src%2Fapp%2Fmodal-example.component.ts,src%2Fapp%2Fmodal-example.component.html,src%2Fapp%2Fexample.component.html,src%2Fapp%2Fexample.component.ts

Ionic Info

see stackblitz

Additional Information

My current workaround is to render ion-datetime-button after the lifecycle ngAfterViewInit() is resolved:

  public afterInit = signal(false);

  public ngAfterViewInit(): void {
    this.afterInit.set(true);
  }

 @if (afterInit()) {
     <ion-datetime-button datetime="calendar-trigger">
         <span slot="date-target"> {{ selectedDate() | date: 'fullDate' }} </span>
      </ion-datetime-button>
   }