Improve search usability in mobile

ajuvonen · Sep 7, 2024 · bd02951 · bd02951
1 parent cf31dca
commit bd02951
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 25 deletions.
diff --git a/src/components/VeggieSearch.vue b/src/components/VeggieSearch.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import {ref, computed, onMounted} from 'vue';
+import {ref, computed} from 'vue';
 import {useI18n} from 'vue-i18n';
 import {
   Combobox,
@@ -8,11 +8,12 @@ import {
   ComboboxOptions,
   TransitionRoot,
 } from '@headlessui/vue';
-import {useElementBounding, useMemoize, useWindowSize} from '@vueuse/core';
+import {useElementBounding, useMemoize} from '@vueuse/core';
 import {ALL_VEGGIES} from '@/utils/constants';
 import {Category, type TranslatedListing} from '@/utils/types';
 import VeggieSearchGroup from '@/components/VeggieSearchGroup.vue';
 import {getCategoryForVeggie} from '@/utils/helpers';
+import {useScreen} from '@/hooks/screen';
 
 const model = defineModel<string[]>({
   required: true,
@@ -21,15 +22,11 @@ const model = defineModel<string[]>({
 const {t, locale} = useI18n();
 
 const query = ref('');
-const input = ref<InstanceType<typeof ComboboxInput> | null>(null);
+const openButton = ref<typeof ComboboxButton | null>(null);
 
 const optionsElement = ref<InstanceType<typeof ComboboxOptions> | null>(null);
 const {top} = useElementBounding(optionsElement);
-const {height} = useWindowSize();
-
-onMounted(() => {
-  input.value?.$el.focus();
-});
+const {visualHeight} = useScreen();
 
 const allVeggies = useMemoize(() => {
   const collator = new Intl.Collator(locale.value);
@@ -57,26 +54,30 @@ const filteredVeggies = useMemoize(
 );
 
 const getAvailableHeightForOptions = computed(
-  () => `max-height: calc(${height.value}px - ${top.value}px - 1rem)`,
+  () => `max-height: calc(${visualHeight.value}px - ${top.value}px - 1rem)`,
 );
+
+const onMenuClose = () => {
+  query.value = '';
+  openButton.value?.$el.focus();
+};
 </script>
 <template>
-  <Combobox nullable multiple v-model="model" as="div" class="relative h-12 z-10">
+  <Combobox nullable multiple v-model="model" as="div" class="relative h-12 z-20">
     <ComboboxInput
-      ref="input"
       :aria-label="$t('veggieSearch.search')"
       :placeholder="$t('veggieSearch.search')"
       class="veggie-search__input"
       @change="query = $event.target.value"
     />
-    <ComboboxButton class="veggie-search__button">
+    <ComboboxButton class="veggie-search__button" ref="openButton">
       <IconComponent icon="chevron" aria-hidden="true" />
     </ComboboxButton>
     <TransitionRoot
       leave="ease-in duration-100"
       leaveFrom="opacity-100"
       leaveTo="opacity-0"
-      @after-leave="query = ''"
+      @after-leave="onMenuClose"
     >
       <ComboboxOptions
         ref="optionsElement"

diff --git a/src/components/__tests__/__snapshots__/LogView.spec.ts.snap b/src/components/__tests__/__snapshots__/LogView.spec.ts.snap
@@ -1,7 +1,12 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`LogView > renders 1`] = `
-"<div data-v-706d8f88="" class="chart-background justify-center log-view__chart">
+"<div class="relative h-12 z-20" data-headlessui-state=""><input data-v-487fdf11="" value="" id="headlessui-combobox-input-1" aria-expanded="false" aria-autocomplete="list" role="combobox" type="text" tabindex="0" data-headlessui-state="" aria-label="Search For Veggies" placeholder="Search For Veggies" class="veggie-search__input"><button data-v-487fdf11="" id="headlessui-combobox-button-2" type="button" tabindex="-1" aria-haspopup="listbox" aria-expanded="false" data-headlessui-state="" class="veggie-search__button"><svg data-v-487fdf11="" viewBox="0 0 24 24" aria-hidden="true" style="width: 1.25rem; height: 1.25rem;">
+      <path d="M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z" class="transition-all"></path>
+    </svg></button>
+  <!---->
+</div>
+<div data-v-706d8f88="" class="chart-background justify-center log-view__chart">
   <div data-v-706d8f88="" class="front-page-animation">
     <div data-v-706d8f88="" class="front-page-animation__content">
       <div data-v-706d8f88="" class="flex"><svg data-v-706d8f88="" viewBox="0 0 24 24" aria-hidden="true" style="width: 9rem; height: 9rem;" class="front-page-animation__icon">
@@ -25,24 +30,19 @@ exports[`LogView > renders 1`] = `
     </div>
   </div>
 </div>
-<div class="relative h-12 z-10" data-headlessui-state=""><input data-v-487fdf11="" value="" id="headlessui-combobox-input-1" aria-expanded="false" aria-autocomplete="list" role="combobox" type="text" tabindex="0" data-headlessui-state="" aria-label="Search For Veggies" placeholder="Search For Veggies" class="veggie-search__input"><button data-v-487fdf11="" id="headlessui-combobox-button-2" type="button" tabindex="-1" aria-haspopup="listbox" aria-expanded="false" data-headlessui-state="" class="veggie-search__button"><svg data-v-487fdf11="" viewBox="0 0 24 24" aria-hidden="true" style="width: 1.25rem; height: 1.25rem;">
-      <path d="M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z" class="transition-all"></path>
-    </svg></button>
-  <!---->
-</div>
 <transition-group-stub data-v-cd627eac="" name="tags" tag="ul" appear="false" persisted="false" css="true" class="tags__container"></transition-group-stub>"
 `;
 
 exports[`LogView > renders with data 1`] = `
-"<div data-v-8e44268d="" class="chart-background log-view__chart">
-  <category-status-chart-stub data-v-8e44268d="" veggies="wheat" totals="false"></category-status-chart-stub>
-  <h1 data-v-8e44268d="" class="category-status__center-label"><span data-v-8e44268d="">This Week</span> <span data-v-8e44268d="" class="text-6xl">1</span> <span data-v-8e44268d="">Veggies</span></h1>
-</div>
-<div class="relative h-12 z-10" data-headlessui-state=""><input data-v-487fdf11="" value="" id="headlessui-combobox-input-3" aria-expanded="false" aria-autocomplete="list" role="combobox" type="text" tabindex="0" data-headlessui-state="" aria-label="Search For Veggies" placeholder="Search For Veggies" class="veggie-search__input"><button data-v-487fdf11="" id="headlessui-combobox-button-4" type="button" tabindex="-1" aria-haspopup="listbox" aria-expanded="false" data-headlessui-state="" class="veggie-search__button"><svg data-v-487fdf11="" viewBox="0 0 24 24" aria-hidden="true" style="width: 1.25rem; height: 1.25rem;">
+"<div class="relative h-12 z-20" data-headlessui-state=""><input data-v-487fdf11="" value="" id="headlessui-combobox-input-3" aria-expanded="false" aria-autocomplete="list" role="combobox" type="text" tabindex="0" data-headlessui-state="" aria-label="Search For Veggies" placeholder="Search For Veggies" class="veggie-search__input"><button data-v-487fdf11="" id="headlessui-combobox-button-4" type="button" tabindex="-1" aria-haspopup="listbox" aria-expanded="false" data-headlessui-state="" class="veggie-search__button"><svg data-v-487fdf11="" viewBox="0 0 24 24" aria-hidden="true" style="width: 1.25rem; height: 1.25rem;">
       <path d="M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z" class="transition-all"></path>
     </svg></button>
   <!---->
 </div>
+<div data-v-8e44268d="" class="chart-background log-view__chart">
+  <category-status-chart-stub data-v-8e44268d="" veggies="wheat" totals="false"></category-status-chart-stub>
+  <h1 data-v-8e44268d="" class="category-status__center-label"><span data-v-8e44268d="">This Week</span> <span data-v-8e44268d="" class="text-6xl">1</span> <span data-v-8e44268d="">Veggies</span></h1>
+</div>
 <transition-group-stub data-v-cd627eac="" name="tags" tag="ul" appear="false" persisted="false" css="true" class="tags__container">
   <li data-v-cd627eac="" class="tags__tag"><button data-v-24e38f3d="" data-v-cd627eac="" class="button button--tag button--primary" aria-label="Add rice">
       <!--v-if--><svg data-v-cd627eac="" viewBox="0 0 24 24" aria-hidden="true" style="width: 1.25rem; height: 1.25rem;">

diff --git a/src/views/LogView.vue b/src/views/LogView.vue
@@ -47,9 +47,9 @@ watch(achievements, (newValue, oldValue) => {
 });
 </script>
 <template>
+  <VeggieSearch v-model="currentVeggies" />
   <CategoryStatus class="log-view__chart" v-if="currentVeggies.length" :veggies="currentVeggies" />
   <FrontPageAnimation class="log-view__chart" v-else />
-  <VeggieSearch v-model="currentVeggies" />
   <TagsComponent
     :veggies="favorites"
     :variant="['tag', 'primary']"