Improve modal handling: Intercept browser back navigation to dismiss active modals

[pasloc]

Package

v4.x

Description

When using fullscreen or blocking modals, browser back navigation can still be triggered and causes unexpected routing behavior. Ideally, modal overlays should take priority over navigation actions.

Problem

In our application, users can navigate using the browser’s back button even when one or more modals are open. With fullscreen modals this leads to confusing UX: instead of closing the modal, Nuxt Router navigates back to the previous page, leaving the modal open or causing layout glitches.
We attempted to manage this manually, but the useOverlays composable currently does not expose an API to:

• Determine whether the topmost modal is dismissable

Because of this, implementing consistent behavior is difficult.

Expected behavior

• When the browser back button is pressed and a dismissable modal is open, Nuxt UI should dismiss the modal instead of changing the route.
• When a non-dismissable modal is open, the router should not navigate back at all.
• Developers should be able to introspect active overlays (stack, modal types, dismissability, etc.) via useOverlays or a similar API.

Feature request

Please extend useOverlays or provide a new API that supports:

1. Access to the list/stack of currently active modals
2. Ability to check whether the top modal is dismissable
3. Ability to dismiss modals programmatically
4. A built-in mechanism or helper to intercept browser navigation and apply modal-first behavior

I think, that Point 1 and 3 is already there, but I could not find a way to check if the modal is dismissable and the forth point would be a dream.

Additional context

No response

[pasloc]

I've found a way to solve my issue with a nuxt routing middleware:

export default defineNuxtRouteMiddleware((to, from) => {
  const overlay = useOverlay()

  const openOverlays = overlay.overlays.filter((o) => o.isOpen)
  if (openOverlays.length === 0) {
    return true
  }

  openOverlays.forEach((o) => overlay.close(o.id))

  return false
})

But I could not find a way to check if the modal is dismissable.

[genu]

Hi @pasloc

But I could not find a way to check if the modal is dismissible.

The challenge is that useOverlay is a more general purpose composable. The dismissable property is specific to UModal, in this case.

When the browser back button is pressed and a dismissable modal is open, Nuxt UI should dismiss the modal instead of changing the route.
When a non-dismissable modal is open, the router should not navigate back at all.

We could enhance the behavior to account for this behavior if we enhance the properties available to the overlay. (e.g. dismissablility)

Developers should be able to introspect active overlays (stack, modal types, dismissability, etc.) via useOverlays or a similar API.

The run time API for the overlay, indeed, is limited partly because it makes the API much more simple. However:

• You can get a stack of the modals using useOverlay().overlays
• There isn't a way to know the modal type, unless you mean, you'd like to know what component an overlay is managing? (Remember, useOverlay is generic, its not strictly tied to any specific modal type)