add hover text and for keyboard input fallback to includes(searchText…

…) when startsWith is false
45Drives · May 29, 2024 · 3cb9cb0 · 3cb9cb0
1 parent 11e1971
commit 3cb9cb0
Showing 1 changed file with 10 additions and 3 deletions.
diff --git a/houston-common-ui/lib/components/SelectMenu.vue b/houston-common-ui/lib/components/SelectMenu.vue
@@ -2,6 +2,7 @@
 export type SelectMenuOption<T> = {
   label: string;
   value: T;
+  hoverText?: string;
 };
 </script>
 
@@ -68,13 +69,18 @@ const { inputBuffer, onInput } = useTempInputBuffer(1000);
 const optionRefs = ref<HTMLButtonElement[]>([]);
 
 watchEffect(() => {
-  const searchText = inputBuffer.value;
+  const searchText = inputBuffer.value?.toLowerCase();
   if (searchText === undefined) {
     return;
   }
-  const focusIndex = props.options.findIndex((o) =>
-    o.label.startsWith(searchText)
+  let focusIndex = props.options.findIndex((o) =>
+    o.label.toLowerCase().startsWith(searchText)
   );
+  if (focusIndex === -1) {
+    focusIndex = props.options.findIndex((o) =>
+      o.label.toLowerCase().includes(searchText)
+    );
+  }
   if (focusIndex === -1) {
     return;
   }
@@ -130,6 +136,7 @@ watchEffect(() => {
             :class="{ 'font-bold': index === currentSelectionIndex }"
             class="px-3 text-left hover:bg-accent whitespace-nowrap"
             ref="optionRefs"
+            :title="option.hoverText ?? option.label"
           >
             {{ option.label }}
           </button>