ionic-team / ionic-team/ionic-framework

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

Open
#30,956 2 comments 0 reactions 0 assignees View on GitHub
package: core type: bug
Dominant language
TypeScript
Stars
52.7k
Forks
13.3k
Avg merge
1d 15h
Merged PRs (30d)
51

Description

### Prerequisites

- [x] I have read the [Contributing Guidelines](https://github.com/ionic-team/ionic-framework/blob/main/docs/CONTRIBUTING.md#creating-an-issue).
- [x] I agree to follow the [Code of Conduct](https://ionicframework.com/code-of-conduct).
- [x] I have searched for [existing issues](https://github.com/ionic-team/ionic-framework/issues) that already report this problem, without success.

### Ionic Framework Version

v8.x

### Current Behavior

When a `` element is used inside a `` element. The `` element ignores its inputs when the `` was opened using the `ModalController`

### Expected Behavior

The `` element respects the inputs regardless of the way to display it.

### Steps to Reproduce

1. Create a component named `DatetimePickerModal` that uses ``
2. Create a property in the component for an `` option, like `dayValues = "1,10,20"`
3. Add an input to `` 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\\scoop\persist\nvm\nodejs\v22.20.0\node_modules\@ionic\cli)
Ionic Framework : @ionic/angular 8.7.17 (C:\Users\\Projects\\node_modules\@ionic\angular)
@angular-devkit/build-angular : 21.0.5 (C:\Users\\Projects\\node_modules\@angular-devkit\build-angular)
@angular-devkit/schematics : 21.0.5 (C:\Users\\Projects\\node_modules\@angular-devkit\schematics)
@angular/cli : 21.0.5 (C:\Users\\Projects\\node_modules\@angular\cli)
@ionic/angular-toolkit : 12.3.0 (C:\Users\\Projects\\node_modules\@ionic\angular-toolkit)

Capacitor:

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

Utility:

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

System:

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

### Additional Information

Related to https://github.com/ionic-team/ionic-framework/issues/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:
```html

```

This does not:
```html

```
```ts
dayValues = "1,10,20";
```

---

For unknown reasons, wrapping the `` element inside `` also helps with the issue, again only in simple scenarios.

This works
```html

```

This does not:
```html

```

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.