bug: dismiss callback from useIonModal is not called after first dismiss

[MattiaGeccheleAxa]

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

When the canDismiss callback returns false the overlay layer is dismissed and the user can interact again with the modal. If the user tries to close it again the canDismiss callback callback is no longer called.

The Modal is opened in this way:

present({ canDismiss: canDismiss})

Expected Behavior

If the user does not wish to close the modal, canDismiss must return false. But the user should be allowed to close the modal at a later time.

Steps to Reproduce

1. Open an IonModal using the hook useIonModal
2. Provide a canDismiss function which returns resolve(false) if the user doesn't want to close the modal
3. Close the modal using the dimissfunction
4. Refuse to close the modal and the overlay layer will disappear
5. Call the dismiss again
6. Nothing happens

Code Reproduction URL

No response

Ionic Info

I have an error running it linked to the macOS:
TypeError: undefined is not iterable (cannot read property Symbol(Symbol.iterator))

Additional Information

No response

[ionitron-bot]

Thanks for the issue! This issue has been labeled as needs reproduction. This label is added to issues that need a code reproduction.

Please reproduce this issue in an Ionic starter application and provide a way for us to access it (GitHub repo, StackBlitz, etc). Without a reliable code reproduction, it is unlikely we will be able to resolve the issue, leading to it being closed.

If you have already provided a code snippet and are seeing this message, it is likely that the code snippet was not enough for our team to reproduce the issue.

For a guide on how to create a good reproduction, see our Contributing Guide.

[mattiaGec]

Here the github repo https://github.com/mattiaGec/IonicModalTest

[MattiaGeccheleAxa]

modal.bug.mp4

[sean-perkins]

Hello @mattiaGec thank you for reporting this issue!

I can confirm the problematic behavior.

When the dismiss callback returned by useIonModal is called multiple times, it only attempts to dismiss the modal the first time it is called.

This is due to the implementation for the dismiss method in useOverlay:

ionic-framework/packages/react/src/hooks/useOverlay.ts

Lines 86 to 90 in 35ab6b4

	const dismiss = useCallback(async (data?: any, role?: string) => {
	overlayRef.current && (await overlayRef.current.dismiss(data, role));
	overlayRef.current = undefined;
	containerElRef.current = undefined;
	}, []);

The specific problem is this line of code:

ionic-framework/packages/react/src/hooks/useOverlay.ts

Line 88 in 35ab6b4

overlayRef.current = undefined;

We should only be clearing the overlay reference if the overlay actually dismissed, by looking at the return value of overlayRef.current.dismiss. If the overlay did not dismiss, we should not clear the reference.

I will classify this as a bug and the team can prioritize it within the backlog. If anyone would like to submit a PR for this, I would gladly welcome the contribution!

This would be the proposed change that I would validate with testing:

const dismiss = useCallback(async (data?: any, role?: string) => {
  if (overlayRef.current) {
    const didDismiss = await overlayRef.current.dismiss(data, role);
    if (didDismiss) {
      overlayRef.current = undefined;
      containerElRef.current = undefined;
    }
  }
}, []);