ionic-team / ionic-team/ionic-framework
bug: `<ion-datetime>` inside a modal ignores programmatic inputs
- Langage dominant
- TypeScript
- Étoiles
- 52.7k
- Forks
- 13.3k
- Merge moyen
- 1 j 15 h
- PR mergées (30 j)
- 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
```
Guide de contribution
Ouvrir le guide de contribution
Évaluation
Cette issue n'a pas encore été évaluée.