bug: inline modal does not open when the triggering element is added/rendered with a delay

[ryaa]

Prerequisites

• I have read the Contributing Guidelines.
• I agree to follow the Code of Conduct.
• I have searched for existing issues that already report this problem, without success.

Ionic Framework Version

• v4.x
• v5.x
• v6.x
• Nightly

Current Behavior

When the inline modal implemented as described in the ionic doc here but the button is rendered/added with a delay the modal dialog does not work.

Expected Behavior

The modal dialog must be opened as demonstrated in the ionic documentation

Steps to Reproduce

Add the delay to render/add the inline modal dialog triggering element, click on it and not that nothing happens.
Please see the demo here. Please note that you may need to re-load the app inside the stackblitz window (tap on the reload icon in the top right, above the app UI window)

Code Reproduction URL

https://stackblitz.com/edit/ionic6-angular14-z6vez7?file=src/app/app.component.ts

Ionic Info

ionic info

Ionic:

Ionic CLI : 6.20.6 (/Users/alexryltsov/.nvm/versions/node/v18.12.1/lib/node_modules/@ionic/cli)
Ionic Framework : @ionic/angular 6.4.1
@angular-devkit/build-angular : 15.0.4
@angular-devkit/schematics : 15.0.4
@angular/cli : 15.0.4
@ionic/angular-toolkit : 7.0.0

Capacitor:

Capacitor CLI : 4.6.1
@capacitor/android : 4.6.1
@capacitor/core : 4.6.1
@capacitor/ios : 4.6.1

Cordova:

Cordova CLI : not installed
Cordova Platforms : not available
Cordova Plugins : not available

Utility:

cordova-res : 0.15.4
native-run : 1.7.1

System:

Android SDK Tools : 26.1.1 (/Users/alexryltsov/Library/Android/sdk)
NodeJS : v18.12.1 (/Users/alexryltsov/.nvm/versions/node/v18.12.1/bin/node)
npm : 9.2.0
OS : macOS
Xcode : Xcode 14.2 Build version 14C18

Additional Information

Please note that:

• the problem is reproducible on the latest ionic 6.5.0
• if I change *ngIf to [hidden] for the triggering element everything seems to work fine

[liamdebeasi]

Thanks for the report. I can reproduce the reported behavior, but the modal is working as intended. The trigger element must be available in the DOM when the trigger property is set. The modal has no way of knowing when the trigger element is added to the DOM (unless it continually polls for the element, which would have a costly performance overhead).

You can fix this in your app by doing <ion-modal [trigger]="modalEnabled() ? 'open-modal' : undefined">. This code sets the trigger property once the trigger element is in the DOM.

[ryaa]

Thanks for the report. I can reproduce the reported behavior, but the modal is working as intended. The trigger element must be available in the DOM when the trigger property is set. The modal has no way of knowing when the trigger element is added to the DOM (unless it continually polls for the element, which would have a costly performance overhead).

You can fix this in your app by doing <ion-modal [trigger]="modalEnabled() ? 'open-modal' : undefined">. This code sets the trigger property once the trigger element is in the DOM.

Thank you for you quick response. I have change *ngIf to [hidden] on the triggering button and this also seems to work fine.

[ionitron-bot]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.