ionic-team / ionic-team/ionic-framework

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

Đang mở
#30,956 2 bình luận 0 reaction 0 người được giao Xem trên GitHub
package: core type: bug
Ngôn ngữ chính
TypeScript
Star
52.7k
Fork
13.3k
Merge trung bình
1 ngày 15 giờ
Pull request đã merge (30 ngày)
51

Mô tả

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

```

Hướng dẫn đóng góp

Mở hướng dẫn đóng góp

Đánh giá

Issue này chưa được đánh giá.

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.