BACK
Use casesEscape stack — close the top layer
Use cases · 51

Escape stack — close the top layer

Pattern

The user has an overlay (page) open, a modal on top of it, and a dropdown on top of that. Escape should close the dropdown FIRST, then the modal, then the overlay. One at a time, in the right order.

The problem it solves

If each overlay component listens for Escape itself, they all react at once and EVERYTHING closes on a single Escape. Or worse — the bottom layer closes while the top one stays. You need a centralized stack.

Operators and why they matter

  • Subject — receives push/pop actions and Escape events.
  • scan — holds the stack as an immutable array, applying push/pop as a pure reducer.
  • withLatestFrom — on Escape, grabs the current stack and finds the top layer.
  • map — builds the command "close layer X".

Gotchas

  • Each component with its own Escape handler is a recipe for disaster. Only a centralized stack.
  • Mutating the stack array in-place breaks OnPush and testability. New arrays only.
  • On component destroy, the layer must be removed from the stack explicitly. Otherwise the stack holds a "ghost" of the destroyed overlay.

What you get

Escape always acts on the top active layer. Closing happens layer by layer, as the user expects.

script.ts // TypeScript
CONSOLE · Console output
Hit Run to see the result...