fix(events): close calendar popup on route leave
Defensive guard so the date-picker popup can never linger across navigation (reported: it appeared open on the feed after returning from an event detail page). Force calendarOpen=false in onBeforeRouteLeave on both the feed and My Tickets, the two popup hosts. Modals shouldn't survive a route change regardless of how the close/navigation interleave. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
parent
a6dee29922
commit
8339cd1272
2 changed files with 14 additions and 2 deletions
|
|
@ -1,6 +1,6 @@
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { computed, onMounted, ref } from 'vue'
|
import { computed, onMounted, ref } from 'vue'
|
||||||
import { useRouter } from 'vue-router'
|
import { useRouter, onBeforeRouteLeave } from 'vue-router'
|
||||||
import { useI18n } from 'vue-i18n'
|
import { useI18n } from 'vue-i18n'
|
||||||
import { Button } from '@/components/ui/button'
|
import { Button } from '@/components/ui/button'
|
||||||
import {
|
import {
|
||||||
|
|
@ -95,6 +95,13 @@ function onSelectDate(date: Date) {
|
||||||
// The popup closes itself; just apply the day filter.
|
// The popup closes itself; just apply the day filter.
|
||||||
selectDate(date)
|
selectDate(date)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Safety: never let the date-picker popup persist across navigation —
|
||||||
|
// e.g. it should not reappear when returning to the feed from an event
|
||||||
|
// detail page.
|
||||||
|
onBeforeRouteLeave(() => {
|
||||||
|
calendarOpen.value = false
|
||||||
|
})
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,6 @@
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { computed, onMounted, ref, watch } from 'vue'
|
import { computed, onMounted, ref, watch } from 'vue'
|
||||||
import { RouterLink } from 'vue-router'
|
import { RouterLink, onBeforeRouteLeave } from 'vue-router'
|
||||||
import { useUserTickets } from '../composables/useUserTickets'
|
import { useUserTickets } from '../composables/useUserTickets'
|
||||||
import { useEvents } from '../composables/useEvents'
|
import { useEvents } from '../composables/useEvents'
|
||||||
import { useEventsStore } from '../stores/events'
|
import { useEventsStore } from '../stores/events'
|
||||||
|
|
@ -88,6 +88,11 @@ function onSelectDay(date: Date) {
|
||||||
selectedDay.value = date
|
selectedDay.value = date
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Don't let the calendar popup persist across navigation.
|
||||||
|
onBeforeRouteLeave(() => {
|
||||||
|
calendarOpen.value = false
|
||||||
|
})
|
||||||
|
|
||||||
const visibleGroups = computed(() => {
|
const visibleGroups = computed(() => {
|
||||||
if (selectedDay.value) {
|
if (selectedDay.value) {
|
||||||
return groupedTickets.value.filter(g => isGroupOnDay(g.eventId, selectedDay.value!))
|
return groupedTickets.value.filter(g => isGroupOnDay(g.eventId, selectedDay.value!))
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue