bug: action sheet, alert, picker, and toast do not open when isOpen is initially true

[legendar]

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

v7.x

Current Behavior

I want to show IonToast on page load based on some condition, e.g:

const {isToastOpen} = useState(true)
...
<IonToast
  message="Some message"
  isOpen={isOpen}
>

if isOpen is initially true then a toast does not appear. It only appears if isOpen is initially false and then changed to true 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:

<IonToast
  message="Some message"
  isOpen={true}
>

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#L23

Code 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'

   Require stack:
   - /home/***/.config/yarn/global/node_modules/@ionic/cli/lib/project/index.js
   - /home/***/.config/yarn/global/node_modules/@ionic/cli/lib/index.js
   - /home/***/.config/yarn/global/node_modules/@ionic/cli/index.js
   - /home/***/.config/yarn/global/node_modules/@ionic/cli/bin/ionic

[WARN] Error loading @capacitor/android package.json: Error: Cannot find module '@capacitor/android/package.json'

   Require stack:
   - /home/***/.config/yarn/global/node_modules/@ionic/cli/lib/project/index.js
   - /home/***/.config/yarn/global/node_modules/@ionic/cli/lib/index.js
   - /home/***/.config/yarn/global/node_modules/@ionic/cli/index.js
   - /home/***/.config/yarn/global/node_modules/@ionic/cli/bin/ionic

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:

function InlineToast({
  isOpen,
  ...otherProps
}): JSX.Element {
  const [isOpenInternal, setIsOpenInternal] = useState(false);

  useEffect(() => {
    // setTimeout is needed because sometimes the toast shadowDom is not ready
    setTimeout(() => {
      setIsOpenInternal(isOpen);
    }, 10);
  }, [isOpen]);

  return (
    <IonToast
      isOpen={isOpenInternal}
      {...otherProps}
    />
  );
}

In the provided repo replace IonToast with InlineToast component and the toast will appear.

[liamdebeasi]

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:

ionic-framework/core/src/components/modal/modal.tsx

Lines 366 to 368 in a0b3ef0

	if (this.isOpen === true) {
	raf(() => this.present());
	}

Toast, picker, action sheet, and alert need this logic. Loading, modal, and popover are not impacted.

[liamdebeasi]

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

[legendar]

Thanks for re quick response!
I tested the fix on a sandbox and on a real project. It works fine!

[liamdebeasi]

Thanks for the issue. This has been resolved via #27933, and a fix will be available in an upcoming release of Ionic Framework.

[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.