Closed legendar closed 1 year ago
Thanks for the report. It looks like some overlay components are missing logic in their didLoad
lifecycle that opens the overlay if isOpen="true"
. For example, modal has the correct logic: https://github.com/ionic-team/ionic-framework/blob/a0b3ef02af718e232246515bb873ad8c090fa55d/core/src/components/modal/modal.tsx#L366-L368
Toast, picker, action sheet, and alert need this logic. Loading, modal, and popover are not impacted.
Here is a dev build with a proposed fix if you are interested in testing:
npm install @ionic/react@7.2.3-dev.11691156718.1638345c
Thanks for re quick response! I tested the fix on a sandbox and on a real project. It works fine!
Thanks for the issue. This has been resolved via https://github.com/ionic-team/ionic-framework/pull/27933, and a fix will be available in an upcoming release of Ionic Framework.
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.
Prerequisites
Ionic Framework Version
v7.x
Current Behavior
I want to show IonToast on page load based on some condition, e.g:
if
isOpen
is initiallytrue
then a toast does not appear. It only appears ifisOpen
is initiallyfalse
and then changed totrue
via timeout or any other event.Expected Behavior
When I set
isOpen={true}
I expect that toast appears regardless of any other state.Steps to Reproduce
Minimal STR is:
In the provided repo the toast is rendered inside
ExploreContainer
here: https://github.com/legendar/ion-input-label-issue/blob/main/src/components/ExploreContainer.tsx#L23Code Reproduction URL
https://github.com/legendar/ion-input-label-issue
Ionic Info
[WARN] Error loading @capacitor/ios package.json: Error: Cannot find module '@capacitor/ios/package.json'
[WARN] Error loading @capacitor/android package.json: Error: Cannot find module '@capacitor/android/package.json'
Ionic:
Ionic CLI : 7.1.1 (/home/***/.config/yarn/global/node_modules/@ionic/cli) Ionic Framework : @ionic/react 7.1.3
Capacitor:
Capacitor CLI : 5.2.1 @capacitor/android : not installed @capacitor/core : 5.2.1 @capacitor/ios : not installed
Utility:
cordova-res : not installed globally native-run : 1.7.2
System:
NodeJS : v16.15.0 (/home/***/.nvm/versions/node/v16.15.0/bin/node) npm : 8.5.5 OS : Linux 5.10
Additional Information
The following component can be used as a quick workaround:
In the provided repo replace
IonToast
withInlineToast
component and the toast will appear.