fix(overlays): prevent overlays from getting stuck open

[mapsandapps]

Issue number: resolves #27200

---

What is the current behavior?

A bug occurs when you click twice quickly to open an overlay with a small timeout. In some cases, the overlay will present, dismiss, present, then not dismiss the second time, getting stuck open. You can reproduce manually this by grabbing the test HTML included in this PR and putting it in a branch that doesn't include a fix.

What is the new behavior?

• When an overlay with a short timeout is triggered twice quickly, it will open-close-open-close.
• The behavior is the same for all overlay components

Does this introduce a breaking change?

• Yes
• No

Other information

Relevant links:

• bug: v7 ion-loading isOpen property sometimes stuck and ignored on fast change #27200
• https://ionic-cloud.atlassian.net/browse/FW-4374
• https://ionic-cloud.atlassian.net/browse/FW-4053

I'm not sure how to write an automated test for this bug due to the short timeout required.

You can manually test the fix in this Stackblitz by changing the Ionic version between 7.3.1 and 7.3.2-dev.11693262117.17edbf6d

[stackblitz]

Run & review this pull request in StackBlitz Codeflow.

[liamdebeasi]

I found a couple bugs, but otherwise this looks good!

[liamdebeasi]

Great work on this!

[liamdebeasi]

sorry one last thing - found a typo :)

[adamduren]

I am still seeing this with:

{
  "@ionic/react": "^7.5.7",
  "react": "^18.0.0",
  "react-dom": "^18.0.0",
}

Please let me know how I can help.

[adamduren]

Here's a video of a test I created using a fresh react project made with ionic start. The test shows 10 iterations with a dismiss delay of 20ms in which the bug is reproduced 0% of the time. Changing this to 10ms however shows it can be reproduced 20% of the time. It gets worse of course if there's no delay.

This may seem like an edge case and it could be argued that IonLoading is not appropriate here but we have some async tasks that are sometimes very quick <10ms but sometimes they are much longer than which necessitates the use of IonLoading.

ion-overlay-dismiss-bug.mov

[thetaPC]

@adamduren Thank you for bringing this to our attention! Please open a new issue so the team can track it separately.

[hussam-001]

I am still seeing this with:

{
  "@ionic/react": "^7.5.7",
  "react": "^18.0.0",
  "react-dom": "^18.0.0",
}

Please let me know how I can help.

here is a workaround for this

import { IonLoading } from "@ionic/react";
import { useEffect, useRef } from "react";

const LoadingIndicator = ({
  isOpen,
  ...props
}: React.ComponentProps<typeof IonLoading>) => {
  const ref = useRef<HTMLIonLoadingElement>(null);

  useEffect(() => {
    ref.current?.[isOpen ? "present" : "dismiss"]();
  }, [isOpen]);

  if (!isOpen) return null;
  return <IonLoading ref={ref} {...props} />;
};

export default LoadingIndicator;

---

<LoadingIndicator isOpen={isLoading} />

[DunhamGitHub]

Still seing this bug...

{
  "@ionic/react": "^8.1.1",
  "react": "^18.3.1",
  "react-dom": "^18.3.1",
}

[DunhamGitHub]

I am still seeing this with:

{
  "@ionic/react": "^7.5.7",
  "react": "^18.0.0",
  "react-dom": "^18.0.0",
}

Please let me know how I can help.

here is a workaround for this

import { IonLoading } from "@ionic/react";
import { useEffect, useRef } from "react";

const LoadingIndicator = ({
  isOpen,
  ...props
}: React.ComponentProps<typeof IonLoading>) => {
  const ref = useRef<HTMLIonLoadingElement>(null);

  useEffect(() => {
    ref.current?.[isOpen ? "present" : "dismiss"]();
  }, [isOpen]);

  if (!isOpen) return null;
  return <IonLoading ref={ref} {...props} />;
};

export default LoadingIndicator;

<LoadingIndicator isOpen={isLoading} />

Does not show the popup dialog.

When I remove ref={ref} from the return element, then it does ...