fix(modal): add fallback timer for mobile close animation
On mobile, closeModal() relies on the CSS animationend event to call _doClose(). When the animation does not fire (prefers-reduced-motion, tab switch, browser quirk), the modal stays stuck and the user cannot dismiss it. A 300ms fallback timer now guarantees cleanup runs. Reported in discussion #9
This commit is contained in:
@@ -7,6 +7,11 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
|
||||
|
||||
## [Unreleased]
|
||||
|
||||
## [0.7.7] - 2026-04-04
|
||||
|
||||
### Fixed
|
||||
- Fix modal not closing on mobile when tapping Cancel or Save - add fallback timer for cases where CSS animationend event does not fire (prefers-reduced-motion, tab switch, etc.)
|
||||
|
||||
## [0.7.6] - 2026-04-04
|
||||
|
||||
### Fixed
|
||||
|
||||
+1
-1
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "oikos",
|
||||
"version": "0.7.6",
|
||||
"version": "0.7.7",
|
||||
"description": "Self-hosted family planner - calendar, tasks, shopping, meal planning, budget and more. Private, open-source, no subscription.",
|
||||
"main": "server/index.js",
|
||||
"type": "module",
|
||||
|
||||
@@ -264,7 +264,10 @@ export function closeModal() {
|
||||
const isMobile = window.innerWidth < 768;
|
||||
if (isMobile && panel) {
|
||||
panel.classList.add('modal-panel--closing');
|
||||
// Fallback-Timer falls animationend nicht feuert (prefers-reduced-motion, Tab-Wechsel etc.)
|
||||
const fallback = setTimeout(_doClose, 300);
|
||||
panel.addEventListener('animationend', () => {
|
||||
clearTimeout(fallback);
|
||||
_doClose();
|
||||
}, { once: true });
|
||||
return;
|
||||
|
||||
Reference in New Issue
Block a user