Merge pull request #2375 from Particular/john/focus

Add autofocus for filter dropdown

Author: johnsimons

src/Frontend/src/components/FilterInput.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed } from "vue";
+import { computed, useTemplateRef } from "vue";
 import debounce from "lodash/debounce";
 
 const model = defineModel<string>({ required: true });
@@ -13,15 +13,21 @@ const localInput = computed({
     debounceUpdateModel(newValue);
   },
 });
-
+const textField = useTemplateRef<HTMLInputElement>("textField");
 const debounceUpdateModel = debounce((value: string) => {
   model.value = value;
 }, 600);
+
+defineExpose({ focus });
+
+function focus() {
+  textField.value?.focus();
+}
 </script>
 
 <template>
   <div role="search" aria-label="filter" class="filter-input">
-    <input type="search" @focus="() => emit('focus')" @blur="() => emit('blur')" :placeholder="props.placeholder" :aria-label="props.ariaLabel" class="form-control filter-input" v-model="localInput" />
+    <input ref="textField" type="search" @focus="() => emit('focus')" @blur="() => emit('blur')" :placeholder="props.placeholder" :aria-label="props.ariaLabel" class="form-control filter-input" v-model="localInput" />
   </div>
 </template>
 

src/Frontend/src/components/audit/ListFilterSelector.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import FilterInput from "@/components/FilterInput.vue";
-import { ref, watch } from "vue";
+import { onMounted, ref, useTemplateRef, watch } from "vue";
 
 const selected = defineModel<string>({ required: true });
 const props = withDefaults(
@@ -29,17 +29,24 @@ watch([filter, () => props.items], () => {
 function setFilter(item: string, isSelected: boolean) {
   selected.value = isSelected && props.canClear ? "" : item;
 }
+const bootstrapDropDown = useTemplateRef<HTMLElement | null>("bootstrapDropDown");
+const filterInput = useTemplateRef<{ focus: () => void } | null>("filterInput");
+onMounted(() => {
+  bootstrapDropDown.value?.addEventListener("shown.bs.dropdown", () => {
+    filterInput.value?.focus();
+  });
+});
 </script>
 
 <template>
-  <div class="dropdown">
+  <div ref="bootstrapDropDown" class="dropdown">
     <button type="button" aria-label="open dropdown menu" class="btn btn-dropdown dropdown-toggle sp-btn-menu" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
       <span class="wrap-text">{{ selected || defaultEmptyText }}</span>
     </button>
     <div class="dropdown-menu wrapper">
       <div class="instructions">{{ instructions }}</div>
       <div v-if="showFilter" class="filter-input">
-        <FilterInput v-model="filter" :placeholder="`Filter ${itemName}s`" />
+        <FilterInput ref="filterInput" v-model="filter" :placeholder="`Filter ${itemName}s`" />
       </div>
       <div class="items-container">
         <div class="item-container" v-if="showClear && selected" @click.prevent="() => setFilter('', true)">