after the search bar is focused and the screen height is reduced, let…

… the sheet scroll to top
mayswind · Feb 11, 2025 · 2e01e55 · 2e01e55
1 parent 13cc6a2
commit 2e01e55
Show file tree

Hide file tree

Showing 4 changed files with 48 additions and 12 deletions.
diff --git a/src/components/mobile/TransactionTagSelectionSheet.vue b/src/components/mobile/TransactionTagSelectionSheet.vue
@@ -1,5 +1,5 @@
 <template>
-    <f7-sheet swipe-to-close swipe-handler=".swipe-handler"
+    <f7-sheet ref="sheet" swipe-to-close swipe-handler=".swipe-handler"
               style="height: auto" :opened="show"
               @sheet:open="onSheetOpen" @sheet:closed="onSheetClosed">
         <f7-toolbar>
@@ -18,7 +18,8 @@
                       :placeholder="tt('Find tag')"
                       :disable-button="false"
                       v-if="enableFilter"
-                      @input="filterContent = $event.target.value">
+                      @input="filterContent = $event.target.value"
+                      @focus="onSearchBarFocus">
         </f7-searchbar>
         <f7-page-content :class="'no-padding-top ' + heightClass">
             <f7-list class="no-margin-top no-margin-bottom" v-if="(!allTags || !allTags.length || noAvailableTag) && !newTag">
@@ -84,7 +85,7 @@
 
 <script setup lang="ts">
 import { ref, computed, useTemplateRef } from 'vue';
-import type { Searchbar } from 'framework7/types';
+import type { Sheet, Searchbar } from 'framework7/types';
 
 import { useI18n } from '@/locales/helpers.ts';
 import { useI18nUIComponents, showLoading, hideLoading } from '@/lib/ui/mobile.ts';
@@ -93,7 +94,7 @@ import { TransactionTag } from '@/models/transaction_tag.ts';
 import { useTransactionTagsStore } from '@/stores/transactionTag.ts';
 
 import { copyArrayTo } from '@/lib/common.ts';
-import { type Framework7Dom, scrollToSelectedItem } from '@/lib/ui/mobile.ts';
+import { type Framework7Dom, scrollToSelectedItem, scrollSheetToTop } from '@/lib/ui/mobile.ts';
 
 const props = defineProps<{
     modelValue: string[];
@@ -112,6 +113,7 @@ const { showToast } = useI18nUIComponents();
 
 const transactionTagsStore = useTransactionTagsStore();
 
+const sheet = useTemplateRef<Sheet.Sheet>('sheet');
 const searchbar = useTemplateRef<Searchbar.Searchbar>('searchbar');
 
 const filterContent = ref<string>('');
@@ -220,6 +222,10 @@ function cancelSaveNewTag(): void {
     newTag.value = null;
 }
 
+function onSearchBarFocus(): void {
+    scrollSheetToTop(sheet.value?.$el as HTMLElement, window.innerHeight); // $el is not Framework7 Dom
+}
+
 function onSheetOpen(event: { $el: Framework7Dom }): void {
     selectedItemIds.value = copyArrayTo(props.modelValue, []);
     newTag.value = null;

diff --git a/src/components/mobile/TreeViewSelectionSheet.vue b/src/components/mobile/TreeViewSelectionSheet.vue
@@ -1,5 +1,5 @@
 <template>
-    <f7-sheet swipe-to-close swipe-handler=".swipe-handler"
+    <f7-sheet ref="sheet" swipe-to-close swipe-handler=".swipe-handler"
               style="height: auto" :opened="show" @sheet:open="onSheetOpen" @sheet:closed="onSheetClosed">
         <f7-toolbar>
             <div class="swipe-handler"></div>
@@ -13,7 +13,8 @@
                       :placeholder="filterPlaceholder"
                       :disable-button="false"
                       v-if="enableFilter"
-                      @input="filterContent = $event.target.value">
+                      @input="filterContent = $event.target.value"
+                      @focus="onSearchBarFocus">
         </f7-searchbar>
         <f7-page-content :class="'no-padding-top ' + heightClass">
             <f7-list class="no-margin-top no-margin-bottom" v-if="!filteredItems || !filteredItems.length">
@@ -49,12 +50,12 @@
 
 <script setup lang="ts">
 import { ref, computed, useTemplateRef } from 'vue';
-import type { Searchbar } from 'framework7/types';
+import type { Sheet, Searchbar } from 'framework7/types';
 
 import { useI18n } from '@/locales/helpers.ts';
 import { type TwoLevelItemSelectionBaseProps, useTwoLevelItemSelectionBase } from '@/components/base/TwoLevelItemSelectionBase.ts';
 
-import { type Framework7Dom, scrollToSelectedItem } from '@/lib/ui/mobile.ts';
+import { type Framework7Dom, scrollToSelectedItem, scrollSheetToTop } from '@/lib/ui/mobile.ts';
 
 interface MobileTwoLevelItemSelectionBaseProps extends TwoLevelItemSelectionBaseProps {
     show: boolean;
@@ -78,6 +79,7 @@ const {
     updateCurrentSecondaryValue
 } = useTwoLevelItemSelectionBase(props);
 
+const sheet = useTemplateRef<Sheet.Sheet>('sheet');
 const searchbar = useTemplateRef<Searchbar.Searchbar>('searchbar');
 
 const currentValue = ref<unknown>(props.modelValue);
@@ -132,6 +134,10 @@ function onSecondaryItemClicked(subItem: unknown): void {
     emit('update:show', false);
 }
 
+function onSearchBarFocus(): void {
+    scrollSheetToTop(sheet.value?.$el as HTMLElement, window.innerHeight); // $el is not Framework7 Dom
+}
+
 function onSheetOpen(event: { $el: Framework7Dom }): void {
     currentValue.value = props.modelValue;
     scrollToSelectedItem(event.$el, '.page-content', '.treeview-item .treeview-item-selected');

diff --git a/src/components/mobile/TwoColumnListItemSelectionSheet.vue b/src/components/mobile/TwoColumnListItemSelectionSheet.vue
@@ -1,5 +1,5 @@
 <template>
-    <f7-sheet swipe-to-close swipe-handler=".swipe-handler"
+    <f7-sheet ref="sheet" swipe-to-close swipe-handler=".swipe-handler"
               style="height: auto" :opened="show" @sheet:open="onSheetOpen" @sheet:closed="onSheetClosed">
         <f7-toolbar>
             <div class="swipe-handler"></div>
@@ -13,7 +13,8 @@
                       :placeholder="filterPlaceholder"
                       :disable-button="false"
                       v-if="enableFilter"
-                      @input="filterContent = $event.target.value">
+                      @input="filterContent = $event.target.value"
+                      @focus="onSearchBarFocus">
         </f7-searchbar>
         <f7-page-content class="no-padding-top">
             <div class="grid grid-gap" :class="{ 'grid-cols-2': filteredItems && filteredItems.length }">
@@ -70,12 +71,12 @@
 
 <script setup lang="ts">
 import { ref, computed, useTemplateRef } from 'vue';
-import type { Searchbar } from 'framework7/types';
+import type { Sheet, Searchbar } from 'framework7/types';
 
 import { useI18n } from '@/locales/helpers.ts';
 import { type CommonTwoColumnListItemSelectionProps, useTwoColumnListItemSelectionBase } from '@/components/base/TwoColumnListItemSelectionBase.ts';
 
-import { type Framework7Dom, scrollToSelectedItem } from '@/lib/ui/mobile.ts';
+import { type Framework7Dom, scrollToSelectedItem, scrollSheetToTop } from '@/lib/ui/mobile.ts';
 
 interface MobileTwoColumnListItemSelectionProps extends CommonTwoColumnListItemSelectionProps {
     show: boolean;
@@ -101,6 +102,7 @@ const {
     updateCurrentSecondaryValue
 } = useTwoColumnListItemSelectionBase(props);
 
+const sheet = useTemplateRef<Sheet.Sheet>('sheet');
 const searchbar = useTemplateRef<Searchbar.Searchbar>('searchbar');
 
 const currentPrimaryValue = ref<unknown>(getCurrentPrimaryValueBySecondaryValue(props.modelValue));
@@ -127,6 +129,10 @@ function onSecondaryItemClicked(subItem: unknown): void {
     close();
 }
 
+function onSearchBarFocus(): void {
+    scrollSheetToTop(sheet.value?.$el as HTMLElement, window.innerHeight); // $el is not Framework7 Dom
+}
+
 function onSheetOpen(event: { $el: Framework7Dom }): void {
     currentPrimaryValue.value = getCurrentPrimaryValueBySecondaryValue(props.modelValue);
     currentSecondaryValue.value = props.modelValue;

diff --git a/src/lib/ui/mobile.ts b/src/lib/ui/mobile.ts
@@ -140,6 +140,24 @@ export function scrollToSelectedItem(parentEl: Framework7Dom, containerSelector:
     container.scrollTop(targetPos);
 }
 
+export function scrollSheetToTop(sheetElement: HTMLElement | undefined, windowNormalInnerHeight: number): void {
+    if (!sheetElement) {
+        return;
+    }
+
+    const sheetHeight = sheetElement.offsetHeight;
+
+    if (sheetHeight < windowNormalInnerHeight) {
+        setTimeout(() => {
+            const windowNewInnerHeight = window.innerHeight;
+
+            if (windowNewInnerHeight < windowNormalInnerHeight && sheetHeight < windowNewInnerHeight) {
+                window.scrollTo({ top: windowNormalInnerHeight - sheetHeight - 24, behavior: "smooth" });
+            }
+        }, 300);
+    }
+}
+
 export function useI18nUIComponents() {
     const { tt, te } = useI18n();