From 07f013c9aca0d5dcf6322d4a7040238f432ef7a7 Mon Sep 17 00:00:00 2001
From: Amanda Johnston <90629384+amandaejohnston@users.noreply.github.com>
Date: Thu, 18 May 2023 10:57:20 -0500
Subject: [PATCH] chore(angular): log error when attempting to use reserved
 prop with modals and popovers (#27491)

Issue number: resolves #27205

---------

<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->

<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->

## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->

If an Angular component that makes use of `ModalController` or
`PopoverController` has a property of its own named `modal` or `popover`
respectively, this will collide with an internal reference to the
modal/popover element and cause errors.

## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->

The actual behavior is unchanged, but a console error is logged guiding
the developer on how to fix the issue.

## Does this introduce a breaking change?

- [ ] Yes
- [x] No

<!-- If this introduces a breaking change, please describe the impact
and migration path for existing applications below. -->


## Other information

<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->

I used the original reproduction from the issue to test. Full steps:

1. Clone the repo: https://github.com/Asac2142/expenses
2. Run `git checkout ef95c2e80a9991fe958d628f17ecc4e862c834ef` to get to
the app's state from when the issue was originally posted. Observe that
the component in `src/app/home/create-transaction` has a private prop
named `modal`.
3. Run `npm install`, then install the dev build: `npm install
@ionic/angular@7.0.7-dev.11684263140.15c242cf`
4. Run `ionic serve`. Click the fab button in the lower right. Observe
the console error. If you scroll down in the modal and click the
Category button, this will trigger the originally-reported issue.
5. Rename the private `modal` variable to something else, like `_modal`.
6. Refresh the page and re-open the modal. Note that no error is logged,
and the Category button can be clicked to open another modal without
issue.
---
 angular/src/providers/angular-delegate.ts | 22 ++++++++++++++++++++--
 1 file changed, 20 insertions(+), 2 deletions(-)

diff --git a/angular/src/providers/angular-delegate.ts b/angular/src/providers/angular-delegate.ts
index b3a98f3bff..603a646af8 100644
--- a/angular/src/providers/angular-delegate.ts
+++ b/angular/src/providers/angular-delegate.ts
@@ -83,7 +83,8 @@ export class AngularFrameworkDelegate implements FrameworkDelegate {
           container,
           component,
           componentProps,
-          cssClasses
+          cssClasses,
+          this.elementReferenceKey
         );
         resolve(el);
       });
@@ -119,7 +120,8 @@ export const attachView = (
   container: any,
   component: any,
   params: any,
-  cssClasses: string[] | undefined
+  cssClasses: string[] | undefined,
+  elementReferenceKey: string | undefined
 ): any => {
   /**
    * Wraps the injector with a custom injector that
@@ -145,7 +147,23 @@ export const attachView = (
 
   const instance = componentRef.instance;
   const hostElement = componentRef.location.nativeElement;
+
   if (params) {
+    /**
+     * For modals and popovers, a reference to the component is
+     * added to `params` during the call to attachViewToDom. If
+     * a reference using this name is already set, this means
+     * the app is trying to use the name as a component prop,
+     * which will cause collisions.
+     */
+    if (elementReferenceKey && instance[elementReferenceKey] !== undefined) {
+      console.error(
+        `[Ionic Error]: ${elementReferenceKey} is a reserved property when using ${container.tagName.toLowerCase()}. Rename or remove the "${elementReferenceKey}" property from ${
+          component.name
+        }.`
+      );
+    }
+
     Object.assign(instance, params);
   }
   if (cssClasses) {