bug: `<ion-datetime>` inside a modal ignores programmatic inputs

[Ionaru]

Prerequisites

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

Ionic Framework Version

v8.x

Current Behavior

When a <ion-datetime> element is used inside a <ion-modal> element. The <ion-datetime> element ignores its inputs when the <ion-modal> was opened using the ModalController

Expected Behavior

The <ion-datetime> element respects the inputs regardless of the way to display it.

Steps to Reproduce

1. Create a component named DatetimePickerModal that uses <ion-datetime>
2. Create a property in the component for an <ion-datetime> option, like dayValues = "1,10,20"
3. Add an input to <ion-datetime> that uses the property: [dayValues]="dayValues"
4. Add code to open the modal: this.controller.create({component: DatetimePickerModal}).then((modal) => modal.present());
5. Open the modal
6. See that the dayValues input had no effect.

Code Reproduction URL

https://stackblitz.com/edit/kawiphog

Ionic Info

Ionic:

   Ionic CLI                     : 7.2.1 (C:\Users\<USER>\scoop\persist\nvm\nodejs\v22.20.0\node_modules\@ionic\cli)
   Ionic Framework               : @ionic/angular 8.7.17 (C:\Users\<USER>\Projects\<PROJECT>\node_modules\@ionic\angular)
   @angular-devkit/build-angular : 21.0.5 (C:\Users\<USER>\Projects\<PROJECT>\node_modules\@angular-devkit\build-angular)
   @angular-devkit/schematics    : 21.0.5 (C:\Users\<USER>\Projects\<PROJECT>\node_modules\@angular-devkit\schematics)
   @angular/cli                  : 21.0.5 (C:\Users\<USER>\Projects\<PROJECT>\node_modules\@angular\cli)
   @ionic/angular-toolkit        : 12.3.0 (C:\Users\<USER>\Projects\<PROJECT>\node_modules\@ionic\angular-toolkit)

Capacitor:

   Capacitor CLI      : 8.0.2
   @capacitor/android : 8.0.2 (C:\Users\<USER>\Projects\<PROJECT>\node_modules\@capacitor\android)
   @capacitor/core    : 8.0.2 (C:\Users\<USER>\Projects\<PROJECT>\node_modules\@capacitor\core)
   @capacitor/ios     : 8.0.2 (C:\Users\<USER>\Projects\<PROJECT>\node_modules\@capacitor\ios)

Utility:

   cordova-res : not installed globally
   native-run  : 2.0.3

System:

   NodeJS : v22.20.0 (C:\Users\<USER>\scoop\apps\nvm\current\nodejs\nodejs\node.exe)
   npm    : 11.10.0
   OS     : Windows 10

Additional Information

Related to #30504

Wrapping the element in @defer { ... } seems to work in simple cases, but that workaround does not work in a complex application.

Downgrading @stencil/core to 4.1.0 is no longer an option because Ionic uses a render function that is not available in that version

✘ [ERROR] No matching export in "node_modules/@ionic/core/node_modules/@stencil/core/internal/client/index.js" for import "render"

    node_modules/@ionic/core/components/index.js:4:23:
      4 │ export { getAssetPath, render, setAssetPath, setNonce, setPlatformO...
        ╵                        ~~~~~~

---

For some reason, hardcoding the input value like dayValues="1,10,20" does work correctly.

This works:

<ion-datetime
  dayValues="1,10,20"
/>

This does not:

<ion-datetime
  [dayValues]="dayValues"
/>

dayValues = "1,10,20";

---

For unknown reasons, wrapping the <ion-datetime> element inside <ion-content> also helps with the issue, again only in simple scenarios.

This works

<ion-content>
  <ion-datetime
    [dayValues]="dayValues"
  />
</ion-content>

This does not:

<ion-datetime
  [dayValues]="dayValues"
/>

[haschu]

We ran into the same issue, but with ion-nav instead of ion-datetime.
It appears to be a regression introduced in @ionic/angular v8.6.6, as previous versions work correctly.