bug: Inline overlay breaks when setting root on ion-nav

[modemlooper]

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

• v4.x
• v5.x
• v6.x
• Nightly

Current Behavior

When you load components with setRoot on ion-nav the trigger to open a popover breaks. I also tried using isOpen instead of id trigger and same result.

Expected Behavior

Reloading a view / component with ion-nav setRoot method should still allow an inline popover to be triggered.

Steps to Reproduce

See this repo for example: https://github.com/modemlooper/popover-test

Code Reproduction URL

See this repo for example: https://github.com/modemlooper/popover-test

Ionic Info

N/A this is a stencil web app

Additional Information

No response

[sean-perkins]

@modemlooper can you please make the repository public? Thanks!

[modemlooper]

Changed,

Odd its not working with push method either. Something seems to be disconnecting the elements when navigating by ion-nav methods

In example app, click open popover first it works. Then when you reload with set root button the trigger doesn't work anymore.

[modemlooper]

Changed it to ion-router with push method and set animation direction to root to mimic resetting root and this allows the popover to still work.

work around I guess :)

[sean-perkins]

Ok, I have been able to verify the issue. It applies to all inline overlays using triggers (modals, popovers).

When calling .setRoot(), the component is rendered from a new instance, which renders the inline modal/popover with the same trigger id. This is problematic, because the trigger element already has a reference to the original overlay.

One way to work around this, is to use unique trigger values, per render.

For example:

import { Component, h } from '@stencil/core';

let popoverId = 0;
let modalId = 0;

@Component({
  tag: 'app-home',
  styleUrl: 'app-home.css',
})
export class AppHome {
  setRoot() {
    const nav = document.querySelector('ion-nav');
    nav.setRoot('app-home');
  }

  render() {
    const popoverTrigger = `trigger-popover-button-${++popoverId}`;
    const modalTrigger = `trigger-modal-button-${++modalId}`;
    return [
      <ion-header>
        <ion-toolbar color="primary">
          <ion-title>Home</ion-title>
        </ion-toolbar>
      </ion-header>,

      <ion-content class="ion-padding">
        <ion-button onClick={() => this.setRoot()}>Set Root</ion-button>
        <ion-button id={popoverTrigger}>Click to open popover</ion-button>
        <ion-popover trigger={popoverTrigger}>
          <ion-content>Popover Content</ion-content>
        </ion-popover>
        <ion-button id={modalTrigger}>Click to open modal</ion-button>
        <ion-modal trigger={modalTrigger}>
          <ion-content>modal Content</ion-content>
        </ion-modal>
      </ion-content>,
    ];
  }
}

It may be difficult to make the inline overlays aware that the trigger element is disconnected from the overlay. This may just be a usage pattern issue when using ion-nav with inline overlays.