ionic-team / ionic-team/ionic-framework

bug: <ion-datetime-button> not rendered inside modal

Ouverte
#30,504 12 commentaires 8 réactions 0 personnes assignées Voir sur GitHub
package: core type: bug
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 using `` inside a modal page (created via `ModalController`), the component does not render anything unless the linked `` and `` (e.g. with ID calendar-trigger) is already present in the DOM before the button is initialized.

This seems related to Web Component hydration timing in dynamically loaded views.

However, if a `` with the same ID is rendered earlier (inside a routed page) (even with display: none), the button suddenly works inside the modal, but is rendered from parent page without the possibility to use value binding from modal.

### Expected Behavior

`` should correctly render and bind to its matching target, regardless of where in the component it appears, as long as the referenced element exists in the DOM at the time of rendering.

Hydration/timing should not cause the component to silently fail.

### Steps to Reproduce

1. open [stackblitz](https://stackblitz.com/edit/vnczfh3u?file=src%2Fapp%2Fmodal-example.component.ts,src%2Fapp%2Fmodal-example.component.html,src%2Fapp%2Fexample.component.html,src%2Fapp%2Fexample.component.ts)
2. click on "open" button
3. modal is visible without the `ion-datetime-button` visible
4. comment in the html inside `example.component.html`
5. safe changes
6. click on "open" button
7. modal is visible with `ion-datetime-button` displaying the date

### Code Reproduction URL

https://stackblitz.com/edit/vnczfh3u?file=src%2Fapp%2Fmodal-example.component.ts,src%2Fapp%2Fmodal-example.component.html,src%2Fapp%2Fexample.component.html,src%2Fapp%2Fexample.component.ts

### Ionic Info

see stackblitz

### Additional Information

My current workaround is to render `ion-datetime-button` after the lifecycle `ngAfterViewInit()` is resolved:

```typescript
public afterInit = signal(false);

public ngAfterViewInit(): void {
this.afterInit.set(true);
}
```
```html
@if (afterInit()) {

{{ selectedDate() | date: 'fullDate' }}

}
```

Guide de contribution

Ouvrir le guide de contribution

Évaluation

Cette issue n'a pas encore été évaluée.

Recevez les nouvelles issues par e-mail

Un résumé court des issues GitHub adaptées aux débutants.