fix(overlays): ensure overlayIndex is greater than any existing overlay in DOM - #31325
fix(overlays): ensure overlayIndex is greater than any existing overlay in DOM#31325amanmaurya92 wants to merge 1 commit into
Conversation
|
@amanmaurya92 is attempting to deploy a commit to the Ionic Team on Vercel. A member of the Team first needs to authorize it. |
|
Thanks for digging into this! I don't think it ends up changing anything in practice though. By the time this code runs, connectListeners has already set The only way the scan matters is if something else wrote an index, like a second copy of Let me know if I'm missing something! |
Issue number: resolves #31247
What is the current behavior?
When a dynamically generated overlay (such as an
ion-alerttriggered by anion-selectwithinterface="alert") is opened inside an already active overlay (like anion-modal), it can sometimes be rendered behind the active modal. This is caused by the internallastOverlayIndexfalling out of sync across different module boundaries (common in microfrontends or Angular Standalone Component architectures), causing the newer overlay to receive a lower or equaloverlayIndex(and consequently a lower CSSz-index) than the active modal.What is the new behavior?
prepareOverlayincore/src/utils/overlays.tsto actively query the DOM for all existing Ionic overlays.overlayIndexcurrently present in the DOM.overlayIndexby assigning the maximum between the module'slastOverlayIndexand the DOM'smaxIndex + 1, ensuring the most recently presented overlay is always stacked on top.Does this introduce a breaking change?
Other information
This fix natively relies on
document.querySelectorAllto serve as a robust Single Source of Truth for the stacking order, which effectively bridges the gap in complex environments where@ionic/coremodules might be duplicated or heavily code-split.