タブ切り替え時にスクロール位置がリセットされるように修正

miyaoka · Oct 5, 2024 · b615cb5 · b615cb5
1 parent 69a4562
commit b615cb5
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 27 deletions.
diff --git a/src/components/menu/keywordList/KeywordListPopover.vue b/src/components/menu/keywordList/KeywordListPopover.vue
@@ -106,32 +106,29 @@ const selectedItem = computed(() => {
       </button>
     </div>
 
-    <div class="grid gap-2 overflow-y-scroll [scrollbar-width:none]">
-      <header
-        class="sticky top-0 flex h-10 place-items-center gap-1 border-black bg-white px-2 font-bold shadow-md"
-      >
-        <fieldset role="radiogroup" class="flex flex-row">
-          <label
-            class="flex cursor-pointer flex-row items-center gap-1 rounded-xl px-2 py-1 focus-within:outline has-[input:checked]:bg-gray-200"
-            v-for="group in groupList"
-            :key="group"
-          >
-            <input
-              type="radio"
-              name="searchType"
-              v-model="selectedGroup"
-              :value="group"
-              class="sr-only"
-            />
-            <i :class="`${group === 'keyword' ? 'i-mdi-chat-outline' : 'i-mdi-hashtag'} size-4`" />
-            <span>
-              {{ group }}
-            </span>
-          </label>
-        </fieldset>
-      </header>
-      <KeywordListPopoverItem :itemList="selectedItem" />
-    </div>
+    <header class="place-items-center gap-1 border-black bg-white p-2 font-bold shadow-md">
+      <fieldset role="radiogroup" class="flex flex-row">
+        <label
+          class="flex cursor-pointer flex-row items-center gap-1 rounded-xl px-2 py-1 focus-within:outline has-[input:checked]:bg-gray-200"
+          v-for="group in groupList"
+          :key="group"
+        >
+          <input
+            type="radio"
+            name="searchType"
+            v-model="selectedGroup"
+            :value="group"
+            class="sr-only"
+          />
+          <i :class="`${group === 'keyword' ? 'i-mdi-chat-outline' : 'i-mdi-hashtag'} size-4`" />
+          <span>
+            {{ group }}
+          </span>
+        </label>
+      </fieldset>
+    </header>
+
+    <KeywordListPopoverItem :itemList="selectedItem" :key="selectedGroup" />
   </div>
 </template>
 

diff --git a/src/components/menu/keywordList/KeywordListPopoverItem.vue b/src/components/menu/keywordList/KeywordListPopoverItem.vue
@@ -21,7 +21,7 @@ function setSearchString(str: string) {
 </script>
 
 <template>
-  <div class="grid pb-4">
+  <div class="grid gap-1 overflow-y-scroll pb-6 pt-2 [scrollbar-width:none]">
     <button
       v-for="item in itemList"
       :key="item.value"