🐛 検索クエリリセット後にスクロールを一番上から始めるように

traPtitech · Aug 20, 2023 · 1ac077e · 1ac077e
1 parent 674b804
commit 1ac077e
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 3 deletions.
diff --git a/src/components/Main/CommandPalette/SearchResult.vue b/src/components/Main/CommandPalette/SearchResult.vue
@@ -104,6 +104,7 @@ onBeforeUnmount(() => {
   // 検索クエリを空にして Enter を押したときにリセットされるようにする
   if (query.value === '') {
     resetPaging()
+    noRestore()
   }
 })
 
@@ -125,7 +126,7 @@ const jumpToPage = (page: number) => {
   }
 }
 
-const { didRender } = useKeepScrollPosition(
+const { didRender, noRestore } = useKeepScrollPosition(
   resultListEle,
   computed(() => searchResult.value.map(message => message.id))
 )

diff --git a/src/components/Main/CommandPalette/composables/useKeepScrollPosition.ts b/src/components/Main/CommandPalette/composables/useKeepScrollPosition.ts
@@ -1,5 +1,5 @@
 import type { Ref } from 'vue'
-import { onBeforeUnmount } from 'vue'
+import { onBeforeUnmount, ref } from 'vue'
 import useOnAllRendered from './useOnAllRendered'
 import { useCommandPalette } from '/@/store/app/commandPalette'
 import type { MessageId } from '/@/types/entity-ids'
@@ -10,6 +10,10 @@ const useKeepScrollPosition = (
 ) => {
   const { currentScrollTop } = useCommandPalette()
   const { didRender, onAllRendered } = useOnAllRendered(list)
+  const isNoRestore = ref(false)
+  const noRestore = () => {
+    isNoRestore.value = true
+  }
 
   // 開くときにマークダウンが描画しおえたらスクロール位置を適用
   onAllRendered(() => {
@@ -21,11 +25,15 @@ const useKeepScrollPosition = (
   // 閉じるときにスクロール位置を保持
   onBeforeUnmount(() => {
     if (ele.value) {
+      if (isNoRestore.value) {
+        currentScrollTop.value = 0
+        return
+      }
       currentScrollTop.value = ele.value.scrollTop
     }
   })
 
-  return { didRender }
+  return { didRender, noRestore }
 }
 
 export default useKeepScrollPosition