Merge pull request #4048 from traPtitech/SSlime/fix-message-search

検索モーダルを空にしたときの挙動を修正

src/components/Main/CommandPalette/SearchResult.vue

@@ -49,7 +49,7 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, onMounted, ref, watch } from 'vue'
+import { computed, onMounted, onBeforeUnmount, ref, watch } from 'vue'
 import type { MessageId } from '/@/types/entity-ids'
 import { useCommandPalette } from '/@/store/app/commandPalette'
 import type { PopupSelectorItem } from '/@/components/UI/PopupSelector.vue'
@@ -78,7 +78,8 @@ const {
   resetPaging,
   pageCount,
   currentSortKey,
-  query
+  query,
+  executed
 } = useSearchMessages()
 
 watch(
@@ -94,8 +95,17 @@ watch(
 )
 
 onMounted(() => {
-  resetPaging()
-  executeSearchForCurrentPage(query.value)
+  // 初回マウント時に取得する
+  if (!executed.value) {
+    executeSearchForCurrentPage(query.value)
+  }
+})
+onBeforeUnmount(() => {
+  // 検索クエリを空にして Enter を押したときにリセットされるようにする
+  if (query.value === '') {
+    resetPaging()
+    noRestore()
+  }
 })
 
 const resultListEle = ref<HTMLElement | null>(null)
@@ -116,7 +126,7 @@ const jumpToPage = (page: number) => {
   }
 }
 
-const { didRender } = useKeepScrollPosition(
+const { didRender, noRestore } = useKeepScrollPosition(
   resultListEle,
   computed(() => searchResult.value.map(message => message.id))
 )

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