ionic-team / ionic-team/ionic-framework
bug: <ion-datetime-button> not rendered inside modal
- Vorherrschende Sprache
- TypeScript
- Sterne
- 52.7k
- Forks
- 13.3k
- Ø Merge
- 1 T. 15 Std.
- Gemergte PRs (30 T.)
- 51
Beschreibung
### 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' }}
}
```
Beitragsleitfaden
Bewertung
Dieses Issue wurde noch nicht bewertet.