use popover-close property to close popover

src/lib/ui/mobile.ts

@@ -50,6 +50,16 @@ export function hideLoading(): void {
     });
 }
 
+export function closePopover(selector: string): void {
+    f7ready((f7) => {
+        const popover = f7.popover.get(selector);
+
+        if (popover) {
+            popover.close();
+        }
+    });
+}
+
 export function closeAllDialog(): void {
     f7ready((f7) => {
         return f7.dialog.close();

src/views/mobile/accounts/ReconciliationStatementPage.vue

@@ -16,19 +16,20 @@
             </f7-nav-right>
         </f7-navbar>
 
-        <f7-popover class="display-mode-popover-menu"
+        <f7-popover class="display-mode-popover-menu">
-                    v-model:opened="showDisplayModePopover">
             <f7-list dividers>
-                <f7-list-item :title="tt('Transaction List')"
+                <f7-list-item link="#" no-chevron popover-close
+                              :title="tt('Transaction List')"
                               :class="{ 'list-item-selected': !showAccountBalanceTrendsCharts }"
-                              @click="showAccountBalanceTrendsCharts = false; showDisplayModePopover = false">
+                              @click="showAccountBalanceTrendsCharts = false">
                     <template #after>
                         <f7-icon class="list-item-checked-icon" f7="checkmark_alt" v-if="!showAccountBalanceTrendsCharts"></f7-icon>
                     </template>
                 </f7-list-item>
-                <f7-list-item :title="tt('Account Balance Trends')"
+                <f7-list-item link="#" no-chevron popover-close
+                              :title="tt('Account Balance Trends')"
                               :class="{ 'list-item-selected': showAccountBalanceTrendsCharts }"
-                              @click="showAccountBalanceTrendsCharts = true; showDisplayModePopover = false">
+                              @click="showAccountBalanceTrendsCharts = true">
                     <template #after>
                         <f7-icon class="list-item-checked-icon" f7="checkmark_alt" v-if="showAccountBalanceTrendsCharts"></f7-icon>
                     </template>
@@ -279,10 +280,10 @@
             </f7-card-content>
         </f7-card>
 
-        <f7-popover class="chart-data-date-aggregation-type-popover-menu"
+        <f7-popover class="chart-data-date-aggregation-type-popover-menu">
-                    v-model:opened="showChartDataDateAggregationTypePopover">
             <f7-list dividers>
-                <f7-list-item :title="dateAggregationType.displayName"
+                <f7-list-item link="#" no-chevron popover-close
+                              :title="dateAggregationType.displayName"
                               :class="{ 'list-item-selected': chartDataDateAggregationType === dateAggregationType.type }"
                               :key="dateAggregationType.type"
                               v-for="dateAggregationType in allDateAggregationTypes"
@@ -433,12 +434,10 @@ const showAccountBalanceTrendsCharts = ref<boolean>(false);
 const chartDataDateAggregationType = ref<number>(ChartDateAggregationType.Day.type);
 const transactionToDelete = ref<TransactionReconciliationStatementResponseItemWithInfo | null>(null);
 const newClosingBalance = ref<number>(0);
-const showDisplayModePopover = ref<boolean>(false);
 const showCustomDateRangeSheet = ref<boolean>(false);
 const showNewClosingBalanceSheet = ref<boolean>(false);
 const showMoreActionSheet = ref<boolean>(false);
 const showDeleteActionSheet = ref<boolean>(false);
-const showChartDataDateAggregationTypePopover = ref<boolean>(false);
 const virtualDataItems = ref<ReconciliationStatementVirtualListData>({
     items: [],
     topPosition: 0
@@ -673,7 +672,6 @@ function removeTransaction(transaction: TransactionReconciliationStatementRespon
 
 function setChartDataDateAggregationType(type: number): void {
     chartDataDateAggregationType.value = type;
-    showChartDataDateAggregationTypePopover.value = false;
 }
 
 function renderExternal(vl: unknown, vlData: ReconciliationStatementVirtualListData): void {

src/views/mobile/settings/TransactionTagFilterSettingsPage.vue

@@ -101,10 +101,10 @@
             </f7-accordion-item>
         </f7-block>
 
-        <f7-popover class="tag-filter-state-popover-menu"
+        <f7-popover class="tag-filter-state-popover-menu">
-                    v-model:opened="showTagFilterStatePopover">
             <f7-list dividers>
-                <f7-list-item :title="state.displayName"
+                <f7-list-item link="#" no-chevron popover-close
+                              :title="state.displayName"
                               :class="{ 'list-item-selected': filterTagIds[currentTransactionTagId] === state.type }"
                               :key="state.type"
                               v-for="state in [
@@ -191,7 +191,6 @@ const transactionTagsStore = useTransactionTagsStore();
 
 const loadingError = ref<unknown | null>(null);
 const currentTransactionTagId = ref<string>('');
-const showTagFilterStatePopover = ref<boolean>(false);
 const showMoreActionSheet = ref<boolean>(false);
 
 const collapseStates = ref<Record<string, CollapseState>>({
@@ -222,7 +221,6 @@ function init(): void {
 
 function updateCurrentTransactionTagState(state: number): void {
     filterTagIds.value[currentTransactionTagId.value] = state;
-    showTagFilterStatePopover.value = false;
     currentTransactionTagId.value = '';
 }
 

src/views/mobile/statistics/TransactionPage.vue

@@ -14,14 +14,14 @@
         </f7-navbar>
 
         <f7-popover class="chart-data-type-popover-menu"
-                    v-model:opened="showChartDataTypePopover"
                     @popover:open="scrollPopoverToSelectedItem">
             <f7-list dividers>
                 <f7-list-group>
                     <f7-list-item group-title>
                         <small>{{ tt('Categorical Analysis') }}</small>
                     </f7-list-item>
-                    <f7-list-item :title="tt(dataType.name)"
+                    <f7-list-item link="#" no-chevron popover-close
+                                  :title="tt(dataType.name)"
                                   :class="{ 'list-item-selected': analysisType === StatisticsAnalysisType.CategoricalAnalysis && query.chartDataType === dataType.type }"
                                   :key="dataType.type"
                                   v-for="dataType in ChartDataType.values(StatisticsAnalysisType.CategoricalAnalysis)"
@@ -35,7 +35,8 @@
                     <f7-list-item group-title>
                         <small>{{ tt('Trend Analysis') }}</small>
                     </f7-list-item>
-                    <f7-list-item :title="tt(dataType.name)"
+                    <f7-list-item link="#" no-chevron popover-close
+                                  :title="tt(dataType.name)"
                                   :class="{ 'list-item-selected': analysisType === StatisticsAnalysisType.TrendAnalysis && query.chartDataType === dataType.type }"
                                   :key="dataType.type"
                                   v-for="dataType in ChartDataType.values(StatisticsAnalysisType.TrendAnalysis)"
@@ -49,7 +50,8 @@
                     <f7-list-item group-title>
                         <small>{{ tt('Asset Trends') }}</small>
                     </f7-list-item>
-                    <f7-list-item :title="tt(dataType.name)"
+                    <f7-list-item link="#" no-chevron popover-close
+                                  :title="tt(dataType.name)"
                                   :class="{ 'list-item-selected': analysisType === StatisticsAnalysisType.AssetTrends && query.chartDataType === dataType.type }"
                                   :key="dataType.type"
                                   v-for="dataType in ChartDataType.values(StatisticsAnalysisType.AssetTrends)"
@@ -278,10 +280,10 @@
             </f7-card-content>
         </f7-card>
 
-        <f7-popover class="sorting-type-popover-menu"
+        <f7-popover class="sorting-type-popover-menu">
-                    v-model:opened="showSortingTypePopover">
             <f7-list dividers>
-                <f7-list-item :title="sortingType.displayName"
+                <f7-list-item link="#" no-chevron popover-close
+                              :title="sortingType.displayName"
                               :class="{ 'list-item-selected': query.sortingType === sortingType.type }"
                               :key="sortingType.type"
                               v-for="sortingType in allSortingTypes"
@@ -318,10 +320,10 @@
         </f7-toolbar>
 
         <f7-popover class="date-popover-menu"
-                    v-model:opened="showDatePopover"
                     @popover:open="scrollPopoverToSelectedItem">
             <f7-list dividers>
-                <f7-list-item :title="dateRange.displayName"
+                <f7-list-item link="#" no-chevron popover-close
+                              :title="dateRange.displayName"
                               :class="{ 'list-item-selected': queryDateType === dateRange.type }"
                               :key="dateRange.type"
                               v-for="dateRange in allDateRanges"
@@ -342,10 +344,10 @@
         </f7-popover>
 
         <f7-popover class="date-aggregation-popover-menu"
-                    v-model:opened="showDateAggregationPopover"
                     @popover:open="scrollPopoverToSelectedItem">
             <f7-list dividers v-if="analysisType === StatisticsAnalysisType.TrendAnalysis">
-                <f7-list-item :title="aggregationType.displayName"
+                <f7-list-item link="#" no-chevron popover-close
+                              :title="aggregationType.displayName"
                               :class="{ 'list-item-selected': trendDateAggregationType === aggregationType.type }"
                               :key="aggregationType.type"
                               v-for="aggregationType in allTrendAnalysisDateAggregationTypes"
@@ -356,7 +358,8 @@
                 </f7-list-item>
             </f7-list>
             <f7-list dividers v-else-if="analysisType === StatisticsAnalysisType.AssetTrends">
-                <f7-list-item :title="aggregationType.displayName"
+                <f7-list-item link="#" no-chevron popover-close
+                              :title="aggregationType.displayName"
                               :class="{ 'list-item-selected': assetTrendsDateAggregationType === aggregationType.type }"
                               :key="aggregationType.type"
                               v-for="aggregationType in allAssetTrendsDateAggregationTypes"
@@ -496,10 +499,6 @@ const statisticsStore = useStatisticsStore();
 
 const loadingError = ref<unknown | null>(null);
 const reloading = ref<boolean>(false);
-const showChartDataTypePopover = ref<boolean>(false);
-const showSortingTypePopover = ref<boolean>(false);
-const showDatePopover = ref<boolean>(false);
-const showDateAggregationPopover = ref<boolean>(false);
 const showCustomDateRangeSheet = ref<boolean>(false);
 const showCustomMonthRangeSheet = ref<boolean>(false);
 const showMoreActionSheet = ref<boolean>(false);
@@ -674,8 +673,6 @@ function setChartDataType(type: number, chartDataType: number): void {
         chartDataType: chartDataType
     });
 
-    showChartDataTypePopover.value = false;
-
     if (analysisTypeChanged) {
         reload();
     }
@@ -683,32 +680,26 @@ function setChartDataType(type: number, chartDataType: number): void {
 
 function setSortingType(type: number): void {
     if (type < ChartSortingType.Amount.type || type > ChartSortingType.Name.type) {
-        showSortingTypePopover.value = false;
         return;
     }
 
     statisticsStore.updateTransactionStatisticsFilter({
         sortingType: type
     });
-
-    showSortingTypePopover.value = false;
 }
 
 function setTrendDateAggregationType(type: number): void {
     trendDateAggregationType.value = type;
-    showDateAggregationPopover.value = false;
 }
 
 function setAssetTrendsDateAggregationType(type: number): void {
     assetTrendsDateAggregationType.value = type;
-    showDateAggregationPopover.value = false;
 }
 
 function setDateFilter(dateType: number): void {
     if (analysisType.value === StatisticsAnalysisType.CategoricalAnalysis) {
         if (dateType === DateRange.Custom.type) { // Custom
             showCustomDateRangeSheet.value = true;
-            showDatePopover.value = false;
             return;
         } else if (query.value.categoricalChartDateType === dateType) {
             return;
@@ -716,7 +707,6 @@ function setDateFilter(dateType: number): void {
     } else if (analysisType.value === StatisticsAnalysisType.TrendAnalysis) {
         if (dateType === DateRange.Custom.type) { // Custom
             showCustomMonthRangeSheet.value = true;
-            showDatePopover.value = false;
             return;
         } else if (query.value.trendChartDateType === dateType) {
             return;
@@ -724,7 +714,6 @@ function setDateFilter(dateType: number): void {
     } else if (analysisType.value === StatisticsAnalysisType.AssetTrends) {
         if (dateType === DateRange.Custom.type) { // Custom
             showCustomDateRangeSheet.value = true;
-            showDatePopover.value = false;
             return;
         } else if (query.value.assetTrendsChartDateType === dateType) {
             return;
@@ -759,8 +748,6 @@ function setDateFilter(dateType: number): void {
         });
     }
 
-    showDatePopover.value = false;
-
     if (changed) {
         reload();
     }

src/views/mobile/transactions/ListPage.vue

@@ -30,14 +30,14 @@
             </f7-subnavbar>
         </f7-navbar>
 
-        <f7-popover class="chart-data-type-popover-menu"
+        <f7-popover class="chart-data-type-popover-menu">
-                    v-model:opened="showTransactionListPageTypePopover">
             <f7-list dividers>
-                <f7-list-item :title="tt(type.name)"
+                <f7-list-item link="#" no-chevron popover-close
+                              :title="tt(type.name)"
                               :class="{ 'list-item-selected': pageType === type.type }"
                               :key="type.type"
                               v-for="type in TransactionListPageType.values()"
-                              @click="changePageType(type.type); showTransactionListPageTypePopover = false">
+                              @click="changePageType(type.type)">
                     <template #after>
                         <f7-icon class="list-item-checked-icon" f7="checkmark_alt" v-if="pageType === type.type"></f7-icon>
                     </template>
@@ -299,11 +299,10 @@
             <f7-link href="#" @click="loadMore(false)">{{ tt('Load More') }}</f7-link>
         </f7-block>
 
-        <f7-popover class="date-popover-menu"
+        <f7-popover class="date-popover-menu" @popover:open="onPopoverOpen">
-                    v-model:opened="showDatePopover"
-                    @popover:open="onPopoverOpen">
             <f7-list dividers>
-                <f7-list-item :title="dateRange.displayName"
+                <f7-list-item link="#" no-chevron popover-close
+                              :title="dateRange.displayName"
                               :class="{ 'list-item-selected': query.dateType === dateRange.type }"
                               :key="dateRange.type"
                               v-for="dateRange in allDateRanges"
@@ -337,11 +336,12 @@
                                @update:modelValue="changeCustomMonthDateFilter">
         </month-selection-sheet>
 
-        <f7-popover class="category-popover-menu"
+        <f7-popover class="category-popover-menu" @popover:open="onPopoverOpen">
-                    v-model:opened="showCategoryPopover"
-                    @popover:open="onPopoverOpen">
             <f7-list dividers accordion-list>
-                <f7-list-item :class="{ 'list-item-selected': !query.categoryIds }" :title="tt('All')" @click="changeCategoryFilter('')">
+                <f7-list-item link="#" no-chevron popover-close
+                              :class="{ 'list-item-selected': !query.categoryIds }"
+                              :title="tt('All')"
+                              @click="changeCategoryFilter('')">
                     <template #media>
                         <f7-icon f7="rectangle_grid_2x2"></f7-icon>
                     </template>
@@ -349,7 +349,8 @@
                         <f7-icon class="list-item-checked-icon" f7="checkmark_alt" v-if="!query.categoryIds"></f7-icon>
                     </template>
                 </f7-list-item>
-                <f7-list-item :class="{ 'list-item-selected': query.categoryIds && queryAllFilterCategoryIdsCount > 1 }"
+                <f7-list-item link="#" no-chevron popover-close
+                              :class="{ 'list-item-selected': query.categoryIds && queryAllFilterCategoryIdsCount > 1 }"
                               :title="tt('Multiple Categories')"
                               @click="filterMultipleCategories()"
                               v-if="allAvailableCategoriesCount > 0">
@@ -380,7 +381,8 @@
                     </template>
                     <f7-accordion-content>
                         <f7-list dividers class="padding-inline-start">
-                            <f7-list-item :class="{ 'list-item-selected': query.categoryIds === category.id, 'item-in-multiple-selection': queryAllFilterCategoryIdsCount > 1 && queryAllFilterCategoryIds[category.id] }"
+                            <f7-list-item link="#" no-chevron popover-close
+                                          :class="{ 'list-item-selected': query.categoryIds === category.id, 'item-in-multiple-selection': queryAllFilterCategoryIdsCount > 1 && queryAllFilterCategoryIds[category.id] }"
                                           :title="tt('All')" @click="changeCategoryFilter(category.id)">
                                 <template #media>
                                     <f7-icon f7="rectangle_grid_2x2"></f7-icon>
@@ -389,8 +391,9 @@
                                     <f7-icon class="list-item-checked-icon" f7="checkmark_alt" v-if="query.categoryIds === category.id"></f7-icon>
                                 </template>
                             </f7-list-item>
-                            <f7-list-item :title="subCategory.name"
+                            <f7-list-item link="#" no-chevron popover-close
                                           :class="{ 'list-item-selected': query.categoryIds === subCategory.id, 'item-in-multiple-selection': queryAllFilterCategoryIdsCount > 1 && queryAllFilterCategoryIds[subCategory.id] }"
+                                          :title="subCategory.name"
                                           :key="subCategory.id"
                                           v-for="subCategory in category.subCategories"
                                           v-show="!subCategory.hidden || query.categoryIds === subCategory.id"
@@ -412,11 +415,12 @@
             </f7-list>
         </f7-popover>
 
-        <f7-popover class="account-popover-menu"
+        <f7-popover class="account-popover-menu" @popover:open="onPopoverOpen">
-                    v-model:opened="showAccountPopover"
-                    @popover:open="onPopoverOpen">
             <f7-list dividers>
-                <f7-list-item :class="{ 'list-item-selected': !query.accountIds }" :title="tt('All')" @click="changeAccountFilter('')">
+                <f7-list-item link="#" no-chevron popover-close
+                              :class="{ 'list-item-selected': !query.accountIds }"
+                              :title="tt('All')"
+                              @click="changeAccountFilter('')">
                     <template #media>
                         <f7-icon f7="rectangle_grid_2x2"></f7-icon>
                     </template>
@@ -424,7 +428,8 @@
                         <f7-icon class="list-item-checked-icon" f7="checkmark_alt" v-if="!query.accountIds"></f7-icon>
                     </template>
                 </f7-list-item>
-                <f7-list-item :class="{ 'list-item-selected': query.accountIds && queryAllFilterAccountIdsCount > 1 }"
+                <f7-list-item link="#" no-chevron popover-close
+                              :class="{ 'list-item-selected': query.accountIds && queryAllFilterAccountIdsCount > 1 }"
                               :title="tt('Multiple Accounts')"
                               @click="filterMultipleAccounts()"
                               v-if="allAvailableAccountsCount > 0">
@@ -435,8 +440,9 @@
                         <f7-icon class="list-item-checked-icon" f7="checkmark_alt" v-if="query.accountIds && queryAllFilterAccountIdsCount > 1"></f7-icon>
                     </template>
                 </f7-list-item>
-                <f7-list-item :title="account.name"
+                <f7-list-item link="#" no-chevron popover-close
                               :class="{ 'list-item-selected': query.accountIds === account.id, 'item-in-multiple-selection': queryAllFilterAccountIdsCount > 1 && queryAllFilterAccountIds[account.id] }"
+                              :title="account.name"
                               :key="account.id"
                               v-for="account in allAccounts"
                               v-show="(!account.hidden && (!allAccountsMap[account.parentId] || !allAccountsMap[account.parentId]!.hidden)) || query.accountIds === account.id"
@@ -455,33 +461,47 @@
             </f7-list>
         </f7-popover>
 
-        <f7-popover class="more-popover-menu"
+        <f7-popover class="more-popover-menu">
-                    v-model:opened="showMorePopover">
             <f7-list dividers>
                 <f7-list-item group-title>
                     <small>{{ tt('Type') }}</small>
                 </f7-list-item>
-                <f7-list-item :class="{ 'list-item-selected': query.type === 0 }" :title="tt('All')" @click="changeTypeFilter(0)">
+                <f7-list-item link="#" no-chevron popover-close
+                              :class="{ 'list-item-selected': query.type === 0 }"
+                              :title="tt('All')"
+                              @click="changeTypeFilter(0)">
                     <template #after>
                         <f7-icon class="list-item-checked-icon" f7="checkmark_alt" v-if="query.type === 0"></f7-icon>
                     </template>
                 </f7-list-item>
-                <f7-list-item :class="{ 'list-item-selected': query.type === 1 }" :title="tt('Modify Balance')" @click="changeTypeFilter(1)">
+                <f7-list-item link="#" no-chevron popover-close
+                              :class="{ 'list-item-selected': query.type === 1 }"
+                              :title="tt('Modify Balance')"
+                              @click="changeTypeFilter(1)">
                     <template #after>
                         <f7-icon class="list-item-checked-icon" f7="checkmark_alt" v-if="query.type === 1"></f7-icon>
                     </template>
                 </f7-list-item>
-                <f7-list-item :class="{ 'list-item-selected': query.type === 2 }" :title="tt('Income')" @click="changeTypeFilter(2)">
+                <f7-list-item link="#" no-chevron popover-close
+                              :class="{ 'list-item-selected': query.type === 2 }"
+                              :title="tt('Income')"
+                              @click="changeTypeFilter(2)">
                     <template #after>
                         <f7-icon class="list-item-checked-icon" f7="checkmark_alt" v-if="query.type === 2"></f7-icon>
                     </template>
                 </f7-list-item>
-                <f7-list-item :class="{ 'list-item-selected': query.type === 3 }" :title="tt('Expense')" @click="changeTypeFilter(3)">
+                <f7-list-item link="#" no-chevron popover-close
+                              :class="{ 'list-item-selected': query.type === 3 }"
+                              :title="tt('Expense')"
+                              @click="changeTypeFilter(3)">
                     <template #after>
                         <f7-icon class="list-item-checked-icon" f7="checkmark_alt" v-if="query.type === 3"></f7-icon>
                     </template>
                 </f7-list-item>
-                <f7-list-item :class="{ 'list-item-selected': query.type === 4 }" :title="tt('Transfer')" @click="changeTypeFilter(4)">
+                <f7-list-item link="#" no-chevron popover-close
+                              :class="{ 'list-item-selected': query.type === 4 }"
+                              :title="tt('Transfer')"
+                              @click="changeTypeFilter(4)">
                     <template #after>
                         <f7-icon class="list-item-checked-icon" f7="checkmark_alt" v-if="query.type === 4"></f7-icon>
                     </template>
@@ -490,12 +510,16 @@
                 <f7-list-item group-title>
                     <small>{{ tt('Amount') }}</small>
                 </f7-list-item>
-                <f7-list-item :class="{ 'list-item-selected': !query.amountFilter }" :title="tt('All')" @click="changeAmountFilter('')">
+                <f7-list-item link="#" no-chevron popover-close
+                              :class="{ 'list-item-selected': !query.amountFilter }"
+                              :title="tt('All')"
+                              @click="changeAmountFilter('')">
                     <template #after>
                         <f7-icon class="list-item-checked-icon" f7="checkmark_alt" v-if="!query.amountFilter"></f7-icon>
                     </template>
                 </f7-list-item>
-                <f7-list-item :key="filterType.type"
+                <f7-list-item link="#" no-chevron popover-close
+                              :key="filterType.type"
                               :class="{ 'list-item-selected': query.amountFilter && query.amountFilter.startsWith(`${filterType.type}:`) }"
                               :title="tt(filterType.name)"
                               v-for="filterType in AmountFilterType.values()"
@@ -509,24 +533,32 @@
                 <f7-list-item group-title>
                     <small>{{ tt('Tags') }}</small>
                 </f7-list-item>
-                <f7-list-item :class="{ 'list-item-selected': !query.tagFilter }" :title="tt('All')" @click="changeTagFilter('')">
+                <f7-list-item link="#" no-chevron popover-close
+                              :class="{ 'list-item-selected': !query.tagFilter }"
+                              :title="tt('All')"
+                              @click="changeTagFilter('')">
                     <template #after>
                         <f7-icon class="list-item-checked-icon" f7="checkmark_alt" v-if="!query.tagFilter"></f7-icon>
                     </template>
                 </f7-list-item>
-                <f7-list-item :class="{ 'list-item-selected': query.tagFilter === TransactionTagFilter.TransactionNoTagFilterValue }" :title="tt('Without Tags')" @click="changeTagFilter(TransactionTagFilter.TransactionNoTagFilterValue)">
+                <f7-list-item link="#" no-chevron popover-close
+                              :class="{ 'list-item-selected': query.tagFilter === TransactionTagFilter.TransactionNoTagFilterValue }"
+                              :title="tt('Without Tags')"
+                              @click="changeTagFilter(TransactionTagFilter.TransactionNoTagFilterValue)">
                     <template #after>
                         <f7-icon class="list-item-checked-icon" f7="checkmark_alt" v-if="query.tagFilter === TransactionTagFilter.TransactionNoTagFilterValue"></f7-icon>
                     </template>
                 </f7-list-item>
-                <f7-list-item :class="{ 'list-item-selected': query.tagFilter && queryAllFilterTagIdsCount > 1 }"
+                <f7-list-item link="#" no-chevron popover-close
+                              :class="{ 'list-item-selected': query.tagFilter && queryAllFilterTagIdsCount > 1 }"
                               :title="tt('Multiple Tags')" @click="filterMultipleTags()" v-if="allAvailableTagsCount > 0">
                     <template #after>
                         <f7-icon class="list-item-checked-icon" f7="checkmark_alt" v-if="query.tagFilter && queryAllFilterTagIdsCount > 1"></f7-icon>
                     </template>
                 </f7-list-item>
 
-                <f7-list-item :title="transactionTag.name"
+                <f7-list-item link="#" no-chevron popover-close
+                              :title="transactionTag.name"
                               :class="{ 'list-item-selected': queryAllFilterTagIdsCount === 1 && isDefined(queryAllFilterTagIds[transactionTag.id]), 'item-in-multiple-selection': queryAllFilterTagIdsCount > 1 && isDefined(queryAllFilterTagIds[transactionTag.id]) }"
                               :key="transactionTag.id"
                               v-for="transactionTag in allTransactionTags"
@@ -697,11 +729,6 @@ const loadingMore = ref<boolean>(false);
 const transactionToDelete = ref<Transaction | null>(null);
 const transactionInvisibleYearMonths = ref<Record<TextualYearMonth, boolean>>({});
 const transactionYearMonthListHeights = ref<Record<TextualYearMonth, number>>({});
-const showTransactionListPageTypePopover = ref<boolean>(false);
-const showDatePopover = ref<boolean>(false);
-const showCategoryPopover = ref<boolean>(false);
-const showAccountPopover = ref<boolean>(false);
-const showMorePopover = ref<boolean>(false);
 const showCustomDateRangeSheet = ref<boolean>(false);
 const showCustomMonthSheet = ref<boolean>(false);
 const showDeleteActionSheet = ref<boolean>(false);
@@ -1040,7 +1067,6 @@ function changeDateFilter(dateType: number): void {
             showCustomDateRangeSheet.value = true;
         }
 
-        showDatePopover.value = false;
         return;
     } else if (query.value.dateType === dateType) {
         return;
@@ -1074,8 +1100,6 @@ function changeDateFilter(dateType: number): void {
         minTime: dateRange.minTime
     });
 
-    showDatePopover.value = false;
-
     if (changed) {
         reload();
     }
@@ -1207,8 +1231,6 @@ function changeTypeFilter(type: number): void {
         categoryIds: newCategoryFilter
     });
 
-    showMorePopover.value = false;
-
     if (changed) {
         reload();
     }
@@ -1223,8 +1245,6 @@ function changeCategoryFilter(categoryIds: string): void {
         categoryIds: categoryIds
     });
 
-    showCategoryPopover.value = false;
-
     if (changed) {
         reload();
     }
@@ -1249,8 +1269,6 @@ function changeAccountFilter(accountIds: string): void {
         accountIds: accountIds
     });
 
-    showAccountPopover.value = false;
-
     if (changed) {
         reload();
     }
@@ -1269,8 +1287,6 @@ function changeTagFilter(tagFilter: string): void {
         tagFilter: tagFilter
     });
 
-    showMorePopover.value = false;
-
     if (changed) {
         reload();
     }
@@ -1300,7 +1316,6 @@ function changeAmountFilter(filterType: string): void {
     }
 
     if (filterType) {
-        showMorePopover.value = false;
         props.f7router.navigate(`/transaction/filter/amount?type=${filterType}&value=${query.value.amountFilter}`);
         return;
     }
@@ -1309,8 +1324,6 @@ function changeAmountFilter(filterType: string): void {
         amountFilter: filterType
     });
 
-    showMorePopover.value = false;
-
     if (changed) {
         reload();
     }