Open alanacial opened 3 years ago
mmjr-x
commented
1 year ago @alanacial Did you ever find a solution or workaround for this (aside for the already mentioned re-bootstrapping)?
I am running into the same problem and am looking for some guidance :)
jupaesbri
commented
1 year ago Hi everyone! I'm reading this after 2 years of someone having the same issue than me. I have already a portal that is working fine, the problem shows when I try to open a mat-select inside the portal, the dropdown is opening in the "parent" tab. I believe this is because of the DOM reference or something. I'd appreciate if someone can help us here @crisbeto @alanacial
ddallabenetta
commented
1 year ago Same problem here, it would be nice to have a global cdk configuration to set the window/element origin for overlays
alanacial
commented
1 year ago Hey, sorry for the late reply.
I never found a solution for this problem, and it made a dramatic impact to our user experience. I checked on this ticket every few months with the Angular team hoping to be surprised, but never received an update.
On Mon, Sep 11, 2023, 3:04 AM ddallabenetta @.***> wrote:
Same problem here, it would be nice to have a global cdk configuration to set the window/element origin for overlays
— Reply to this email directly, view it on GitHub https://github.com/angular/components/issues/22525#issuecomment-1713574699, or unsubscribe https://github.com/notifications/unsubscribe-auth/ADTW43M6J6AR4UFLM4MP7BLXZ3O4DANCNFSM43KVBRWA . You are receiving this because you were mentioned.Message ID: @.***>
mmjr-x
commented
1 year ago I attempted some debugging of this issue a while back and it seems the problem is probably not caused by the Portal / CDKPortal itself but rather goes a bit deeper and is due the fact that angular HostListeners listening to events with host:/document:/body: prefixes are not aware that the component is attached to another window (internally these listeners are probably registered on initialization).
If anyone would be so kind as to point me to the implementation of the @HostListener decorator in the angular source code I could try to find out if there is a workaround. (And maybe raise a PR or make a polyfill that fixes it or something)?
On Mon, 11 Sept 2023, 18:53 Philip Acierto, @.***> wrote:
Hey, sorry for the late reply.
I never found a solution for this problem, and it made a dramatic impact to our user experience. I checked on this ticket every few months with the Angular team hoping to be surprised, but never received an update.
On Mon, Sep 11, 2023, 3:04 AM ddallabenetta @.***> wrote:
Same problem here, it would be nice to have a global cdk configuration to set the window/element origin for overlays
— Reply to this email directly, view it on GitHub < https://github.com/angular/components/issues/22525#issuecomment-1713574699>,
or unsubscribe < https://github.com/notifications/unsubscribe-auth/ADTW43M6J6AR4UFLM4MP7BLXZ3O4DANCNFSM43KVBRWA>
. You are receiving this because you were mentioned.Message ID: @.***>
— Reply to this email directly, view it on GitHub https://github.com/angular/components/issues/22525#issuecomment-1714252285, or unsubscribe https://github.com/notifications/unsubscribe-auth/AASRHAEMC5VJYY6ACY74IILXZ46ZVANCNFSM43KVBRWA . You are receiving this because you commented.Message ID: @.***>
Reproduction
Use StackBlitz to reproduce your issue:
Steps to reproduce:
Expected Behavior
The mat-menu drop down would appear under the button on the child window
Actual Behavior
the mat-menu drop down appears in the parent/main window
Any component that pops up (menus, drop down lists, dialogs, etc), cdk doesn't render them in the place of the tag you have in the template.
Environment
Stack Overflow copy/paste: (https://stackoverflow.com/questions/67167814/angular-components-through-portal-cdkporal-to-new-window-has-events-triggered)
I have followed a dozen different guides on how to use Angular Portals to take information from my main page and display it in a pop up tab or new window. There have been different ways of accomplishing this with CDK portals taking html and pushing it to new tab, or creating the component dynamically by opening a new blank window and manually copying styles and DOM elements to the blank page. While many of the solutions push dynamic data to a new tab or window successfully, they all suffered from the same issue displaying anything with dynamic bindings, such as a menu, where the drop down will appear on the main/parent window, and not on the pop up.
I've altered a simple example below showing how a mat-menu's on click event will trigger the menu display on the parent/host tab, instead of the child window under the button as you would expect. Please see this issue below:
https://stackblitz.com/edit/angular-portal-issue-parent-receiving-events
I have found one of the best guides showing what I want to accomplish with the display using a new component and dynamic injector here:
https://medium.com/@saranya.thangaraj/open-angular-component-in-a-new-tab-without-bootstrapping-the-whole-app-again-e329af460e92
The same binding issue happens using the guide above, using a NPM called angular-popout-window (https://www.npmjs.com/package/angular-popout-window), and a dozen other portal examples I have found. Some of the guides gets CSS to the new windows properly, but they all are unable to show dynamic events on the child window/tab.
As to my use case and why I need this:
My project requirement dictates a user will select from a list of items in the main page, and upon clicking, a new tab/page opens that allows them to alter and edit the object in a complex component. Without closing the new tab, the user should be able to return to the main app's window and select more items from the list and have multiple tabs/webpages open so they can edit many of these items at once. Data changes will flow back to the parent page and may update the other open tabs.
I have already created this complex component and it works if I re-bootstrap the app in the new tab every time, then url route to the component, and display the component natively without portals. The issue, however, is it causes a long delay on the bootstrap process and re-logging in the user (which takes about ~5-10 seconds), and causes issues with web sessions on our server. I want to avoid all those issues using portals. I believe if I can receive help with the simple issue displayed here, the same fix might solve all my other binding issues in our complex component.