ionic-team / ionic-team/ionic-framework

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

Open
#30,504 12 comments 8 reactions 0 assignees View on GitHub
package: core type: bug
Dominant language
TypeScript
Stars
52.7k
Forks
13.3k
Avg merge
1d 15h
Merged PRs (30d)
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' }}

}
```

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.