[PR #203] [MERGED] fix/194 Add global Escape-to-close for custom modals #273

New issue

Closed

opened 2026-02-26 12:40:49 +03:00 by kerem · 0 comments

kerem commented

2026-02-26 12:40:49 +03:00

Owner

📋 Pull Request Information

Original PR: https://github.com/community-scripts/ProxmoxVE-Local/pull/203
Author: @michelroegl-brunner
Created: 10/20/2025
Status: ✅ Merged
Merged: 10/20/2025
Merged by: @michelroegl-brunner

Base: main ← Head: feat/global-esc-close

📝 Commits (1)

cacd4b3 feat(modal): add global ESC-to-close via ModalStackProvider; wire all modals; keep danger/auth/loading protected; allow ESC even when typing; fix lint

📊 Changes

15 files changed (+93 additions, -6 deletions)

View changed files

📝 src/app/_components/AuthModal.tsx (+2 -0)
📝 src/app/_components/ConfirmationModal.tsx (+6 -3)
📝 src/app/_components/ErrorModal.tsx (+2 -0)
📝 src/app/_components/ExecutionModeModal.tsx (+2 -0)
📝 src/app/_components/GeneralSettingsModal.tsx (+2 -0)
📝 src/app/_components/HelpModal.tsx (+2 -0)
📝 src/app/_components/LXCSettingsModal.tsx (+2 -0)
📝 src/app/_components/LoadingModal.tsx (+2 -0)
📝 src/app/_components/PublicKeyModal.tsx (+2 -0)
📝 src/app/_components/ReleaseNotesModal.tsx (+2 -0)
📝 src/app/_components/ScriptDetailModal.tsx (+2 -0)
📝 src/app/_components/SettingsModal.tsx (+2 -0)
📝 src/app/_components/SetupModal.tsx (+2 -0)
➕ src/app/_components/modal/ModalStackProvider.tsx (+57 -0)
📝 src/app/layout.tsx (+6 -3)

📄 Description

Implements a global ESC-to-close behavior across custom modals.

Key points:

Adds ModalStackProvider with a single keydown listener to close the topmost eligible modal.
Allows ESC even when typing in inputs (per user request).
Protects destructive/critical flows: danger ConfirmationModal, AuthModal, LoadingModal are not dismissible via ESC.
Wires all modals to register/unregister with the stack, providing allowEscape and onClose.
Wrapped app in provider in src/app/layout.tsx.
Fixed lint issues and ensured successful build (npm run build passes).

Testing:

Open any non-critical modal and press ESC: closes.
Focus an input inside any non-critical modal and press ESC: closes.
Open danger confirmation, auth or loading modals and press ESC: no effect.
When multiple modals open, ESC only closes the topmost eligible modal.

_{🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.}

## 📋 Pull Request Information **Original PR:** https://github.com/community-scripts/ProxmoxVE-Local/pull/203 **Author:** [@michelroegl-brunner](https://github.com/michelroegl-brunner) **Created:** 10/20/2025 **Status:** ✅ Merged **Merged:** 10/20/2025 **Merged by:** [@michelroegl-brunner](https://github.com/michelroegl-brunner) **Base:** `main` ← **Head:** `feat/global-esc-close` --- ### 📝 Commits (1) - [`cacd4b3`](https://github.com/community-scripts/ProxmoxVE-Local/commit/cacd4b3f86c95b2f51e3d08b803035eab2be42de) feat(modal): add global ESC-to-close via ModalStackProvider; wire all modals; keep danger/auth/loading protected; allow ESC even when typing; fix lint ### 📊 Changes **15 files changed** (+93 additions, -6 deletions) <details> <summary>View changed files</summary> 📝 `src/app/_components/AuthModal.tsx` (+2 -0) 📝 `src/app/_components/ConfirmationModal.tsx` (+6 -3) 📝 `src/app/_components/ErrorModal.tsx` (+2 -0) 📝 `src/app/_components/ExecutionModeModal.tsx` (+2 -0) 📝 `src/app/_components/GeneralSettingsModal.tsx` (+2 -0) 📝 `src/app/_components/HelpModal.tsx` (+2 -0) 📝 `src/app/_components/LXCSettingsModal.tsx` (+2 -0) 📝 `src/app/_components/LoadingModal.tsx` (+2 -0) 📝 `src/app/_components/PublicKeyModal.tsx` (+2 -0) 📝 `src/app/_components/ReleaseNotesModal.tsx` (+2 -0) 📝 `src/app/_components/ScriptDetailModal.tsx` (+2 -0) 📝 `src/app/_components/SettingsModal.tsx` (+2 -0) 📝 `src/app/_components/SetupModal.tsx` (+2 -0) ➕ `src/app/_components/modal/ModalStackProvider.tsx` (+57 -0) 📝 `src/app/layout.tsx` (+6 -3) </details> ### 📄 Description Implements a global ESC-to-close behavior across custom modals. Key points: - Adds ModalStackProvider with a single keydown listener to close the topmost eligible modal. - Allows ESC even when typing in inputs (per user request). - Protects destructive/critical flows: danger ConfirmationModal, AuthModal, LoadingModal are not dismissible via ESC. - Wires all modals to register/unregister with the stack, providing allowEscape and onClose. - Wrapped app in provider in src/app/layout.tsx. - Fixed lint issues and ensured successful build (npm run build passes). Testing: - Open any non-critical modal and press ESC: closes. - Focus an input inside any non-critical modal and press ESC: closes. - Open danger confirmation, auth or loading modals and press ESC: no effect. - When multiple modals open, ESC only closes the topmost eligible modal. --- <sub>🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.</sub>