ionic-team / ionic-team/ionic-framework

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

Abierto
#30,956 2 comentarios 0 reacciones 0 asignados Ver en GitHub
package: core type: bug
Lenguaje dominante
TypeScript
Estrellas
52.7k
Forks
13.3k
Merge medio
1 d 15 h
PR fusionados (30 d)
51

Descripción

### 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

```

Guía de contribución

Abrir la guía de contribución

Evaluación

Este issue todavía no se ha evaluado.

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.