From 9265f8a02a2a3bb242930a9601b89867eb0c7bd5 Mon Sep 17 00:00:00 2001
From: James Lyne <jim+github@not-null.co.uk>
Date: Mon, 17 Jan 2022 12:21:23 +0000
Subject: [PATCH] Scroll to top of list when searching players

---
 src/components/list/PlayerList.vue        | 8 ++++++--
 src/components/sidebar/PlayersSection.vue | 6 ++++++
 2 files changed, 12 insertions(+), 2 deletions(-)

diff --git a/src/components/list/PlayerList.vue b/src/components/list/PlayerList.vue
index 1b6b31b..1a19775 100644
--- a/src/components/list/PlayerList.vue
+++ b/src/components/list/PlayerList.vue
@@ -15,7 +15,7 @@
   -->
 
 <template>
-	<input v-if="filteredPlayers && search" class="section__search" type="text" name="search"
+	<input ref="searchInput" v-if="filteredPlayers && search" class="section__search" type="text" name="search"
 			       v-model="searchQuery" :placeholder="messagePlayersSearchPlaceholder" @keydown="onKeydown">
 	<RadioList v-if="filteredPlayers.length" :aria-labelledby="ariaLabelledby">
 		<PlayerListItem v-for="player in filteredPlayers" :key="player.name" :player="player"></PlayerListItem>
@@ -26,7 +26,7 @@
 
 <script lang="ts">
 import PlayerListItem from "./PlayerListItem.vue";
-import {computed, defineComponent} from "@vue/runtime-core";
+import {computed, defineComponent, watch} from "@vue/runtime-core";
 import RadioList from "@/components/util/RadioList.vue";
 import {LiveAtlasPlayer} from "@/index";
 import {useStore} from "@/store";
@@ -59,6 +59,7 @@ export default defineComponent({
 			messagePlayersSearchPlaceholder = computed(() => store.state.messages.playersSearchPlaceholder),
 
 			searchQuery = ref(""),
+			searchInput = ref<HTMLInputElement | null>(null),
 
 			filteredPlayers = computed(() => {
 				const query = searchQuery.value.toLowerCase();
@@ -72,12 +73,15 @@ export default defineComponent({
 				e.stopImmediatePropagation();
 			};
 
+		watch(searchQuery, () => searchInput.value!.nextElementSibling!.scrollIntoView());
+
 		return {
 			messageSkeletonPlayers,
 			messageSkeletonPlayersSearch,
 			messagePlayersSearchPlaceholder,
 
 			searchQuery,
+			searchInput,
 
 			filteredPlayers,
 			onKeydown
diff --git a/src/components/sidebar/PlayersSection.vue b/src/components/sidebar/PlayersSection.vue
index cf2b525..c7e823c 100644
--- a/src/components/sidebar/PlayersSection.vue
+++ b/src/components/sidebar/PlayersSection.vue
@@ -54,3 +54,9 @@ export default defineComponent({
 	}
 });
 </script>
+
+<style lang="scss" scoped>
+	::v-deep(.menu) {
+		scroll-margin-top: 8.2rem;
+	}
+</style>